집 >웹 프론트엔드 >JS 튜토리얼 >텍스트 상자 입력 텍스트 수 제한의 js 구현 code_javascript 기술

텍스트 상자 입력 텍스트 수 제한의 js 구현 code_javascript 기술

WBOY원래의: 2016-05-16 15:23:471469검색

일반적으로 텍스트 상자에 입력되는 단어 수에는 제한이 없습니다. 일반적으로 사용자 친화적인 웹사이트에서는 입력할 수 있는 단어 수에 카운트다운 효과가 있을 수 있습니다. 20개 남았다면 이렇게 입력하시면 됩니다. 팁, 예시를 통해 이 효과를 얻는 방법을 소개하겠습니다.

먼저 렌더링을 살펴보세요.

코드는 다음과 같습니다.

<html> 
<head> 
<title>文本框输入文字倒计效果代码</title> 
<style type="text/css"> 
* 
{ 
 margin:0; 
 padding:0; 
} 
.box 
{ 
 width:500px; 
 margin:10px auto; 
} 
p span 
{ 
 color:#069; 
 font-weight:bold; 
} 
textarea 
{ 
 width:300px; 
} 
.textColor 
{ 
 background-color:#0C9; 
} 
.grey 
{ 
 padding:5px; 
 color:#FFF; 
 background-color:#CCCCCC; 
} 
</style> 
<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
 var $tex=$(".tex"); 
 var $but=$(".but"); 
 var ie=jQuery.support.htmlSerialize; 
 var str=0; 
 var abcnum=0; 
 var maxNum=280; 
 var texts=0; 
 
 $tex.val(""); 
 $tex.focus(function(){ 
 if($tex.val()=="") 
 { 
  $("p").html("您还可以输入的字数<span>140</span>"); 
 } 
 }) 
 $tex.blur(function(){ 
 if($tex.val() == "") 
 { 
  $("p").html("请在下面输入您的文字："); 
 } 
 }) 
 if(ie) 
 { 
  $tex[0].oninput = changeNum; 
 } 
 else 
 { 
  $tex[0].onpropertychange = changeNum; 
 } 
 
 function changeNum() 
 { 
 //汉字的个数 
 str=($tex.val().replace(/\w/g,"")).length; 
 //非汉字的个数 
 abcnum=$tex.val().length-str; 
 total=str*2+abcnum; 
 if(str*2+abcnum<maxNum||str*2+abcnum==maxNum) 
 { 
  $but.removeClass() 
  $but.addClass("but"); 
  texts=Math.ceil((maxNum-(str*2+abcnum))/2); 
  $("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"}); 
 } 
 else if(str*2+abcnum>maxNum) 
 { 
  $but.removeClass("") 
  $but.addClass("grey"); 
  texts =Math.ceil(((str*2+abcnum)-maxNum)/2); 
  $("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"}); 
 } 
 } 
}) 
</script> 
</head> 
<body> 
<div class="box"> 
 <p>请在下面输入您的文字：</p> 
 <textarea name="weibao" class="tex" cols="" rows="8"></textarea> 
</div> 
</body> 
</html>

이 기사가 JavaScript 프로그래밍을 배우는 모든 사람에게 도움이 되기를 바랍니다.

성명：

이전 기사：jQuery는 웹 페이지 상단에 고정 탐색 효과 코드를 구현합니다_jquery다음 기사：jQuery는 웹 페이지 상단에 고정 탐색 효과 코드를 구현합니다_jquery

텍스트 상자 입력 텍스트 수 제한의 js 구현 code_javascript 기술

관련 기사