js实现文本框输入文字个数限制代码

通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余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程序设计有所帮助。