一个简单的javascript字符计数器

公司一个项目里有发短信功能,要在页面上提示用户还剩多少字符可以输入,当用户输入的字符数超过最大字符限制,则截取最大字符数的数目。代码还是比较简单的,也算是记录一下。

代码如下:

HTML部分:
 
  1. <textarea id="txtContainer" rows="3" cols="40" ></textarea>  
  2. <br />  
  3. words left: <input id="txtWordCount" type="text" readonly="true" style="width:40px;" />  

javascript部分:

 
  1. <script type="text/javascript">  
  2.       
  3.     function containerKeyupHandler( e ){  
  4.         var count = "10";   
  5.           
  6.         var evt = e || window.event;  
  7.         var elm = evt.target || evt.srcElement;  
  8.           
  9.         var tex = elm.value;  
  10.         var len = tex.length;  
  11.         var wordCount = document.getElementById("txtWordCount");  
  12.         wordCount.value = count - len;  
  13.         if(len > count){  
  14.                 tex = tex.substring(0,count);  
  15.                 elm.value =tex;  
  16.                 wordCount.value = 0;  
  17.                 return false;  
  18.         }  
  19.     }  
  20.       
  21.     function addEvent(elm, evType, fn, useCapture) {  
  22.         if (elm.addEventListener) {  
  23.             elm.addEventListener(evType, fn, useCapture);  
  24.             return true;  
  25.         }  
  26.         else if (elm.attachEvent) {  
  27.             var r = elm.attachEvent('on' + evType, fn);  
  28.             return r;  
  29.         }  
  30.         else {  
  31.             elm['on' + evType] = fn;  
  32.         }  
  33.     }  
  34.   
  35.     addEvent( document.getElementById("txtContainer"), "keyup", containerKeyupHandler );  
  36. </script>  
显示效果:



代码下载:
点击下载

Tags:

posted @ Tuesday, March 10, 2009 2:19 PM

Print

Comments on this entry:

# re: 一个简单的javascript字符计数器

Left by Frazer at 9/19/2009 11:29 PM
Gravatar
我如果是复制黏贴呢? 楼主

# re: 一个简单的javascript字符计数器

Left by jinweijie at 9/21/2009 5:03 PM
Gravatar
hello Frazer,

如果是复制粘贴,那估计只能用onblur来做了,呵呵

Your comment:



 (will not be displayed)


 
 
 
Please add 8 and 4 and type the answer here:
 

Live Comment Preview:

 
View posts by date
«March»
SunMonTueWedThuFriSat
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910