关于input、textarea输入字数限制、提醒 - 梦随清风

关于input、textarea输入字数限制、提醒

描述：即时监控文本框的值，并提示还可以输入多少字符

用到的事件：onpropertychange 这个事件是IE专用的，可以监控文本框的值是否改变。不过在IE9下这个事件只能监控增加的内容而不能监控删除的内容。

　　　　　　oninput这个事件是专门针对非IE浏览器的，效果和onpropertychange 事一样的。

　　　　　　onkeydown这个事件是为了解决onpropertychange 在IE9下存在的那个问题的。

大致代码如下：

　　　　　　JQ代码：

　　　　　　　　function codeLength(cls,maxNum,clsCnt){ 

　　　　　　　　//cls文本框class

　　　　　　　　//maxNums最大输入字数

　　　　　　　　//clsCnt要显示可输入字数容器的class    　　　　　　　　

　　　　　　　　　var curCount=0;//当前字数
   　　　　　　　　 var remainderCount;//剩下的字数
   　　　　　　　　 var curCount=$(cls).val().length;//得到当前字数
    　　　　　　　　remainderCount=maxNum-curCount;//计算剩下的字数
    　　　　　　　$(window).keydown(function(event){   //这个是判断删除的情况（针对IE9存在的那个情况）
      　　　　　　　if(event.keyCode==116)
      　　　　　　　{
       　　　　　　　　　remainderCount=remainderCount+1;//如果删除则可输入字数加1
      　　　　　　　}
     　　　　　　});
    　　　　　　if(remainderCount<=0){//判断如果已经达到最大输入字数，则让剩余字数一直为0，并截取文本框里面的内容（如只让输入10个，则在到达最大输入数以后再输入，就截取前10个）。
      　　　　　　　　remainderCount=0;
      　　　　　　　　str=$(cls).val().substring(0,maxNum);//截取
     　　　　　　　　 $(cls).val(str);  //重新给文本框赋值  
    　　　　　　}
   　　　　　　 $(clsCnt).text(remainderCount);//显示可输入字数
  }   

　　　　　　HTML代码：

<div>
  <textarea class="textarea" onpropertychange="codeLength(\'.textarea\',10,\'.zz\');" oninput="codeLength(\'.textarea\',10,\'.zz\');" onkeydown="codeLength(\'.textarea\',10,\'.zz\')" ></textarea>
  你还可以输入<span class="zz">10</span>个字
 </div>