月光博客 » 编程开发 » 在JavaScript中实现统计文本框Textarea字数

在JavaScript中实现统计文本框Textarea字数

  现在流行的Twitter等微博客网站,有一个很好的用户体验,就是在文本框中输入文字的时候,会自动统计输入的字符,并显示用户还能输入的字符,在限制了140个字的微博客中,这样的小提示可以很好的增强用户体验。

  如果实现这种技术呢,我进行了一些研究,发现实现其实挺简单,几行代码就能完成输入字符统计功能,经过实际测试,其对文字的统计与Twitter等微博客的完全相同。

  使用方法是,先增加一个span,用于显示剩余的字数,然后在Textarea中,加入一个onkeydown和onkeyup的事件,调用另一段JavaScript函数,函数调用的参数为span的id和textarea的id,然后再JavaScript中使用innerHTML返回计算出来的剩余字数。

  以下是相关的JavaScript代码:

<script language="javascript"> 
function countChar(textareaName,spanName)

 document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length;

</script> 
可以输入<span id="counter">140</span>字<br/>
<textarea id="status"  name="status" rows="6" cols="40" onkeydown='countChar("status","counter");' onkeyup='countChar("status","counter");'></textarea>

在JavaScript中实现统计文本框Textarea字数

顶一下 ▲()   踩一下 ▼()

相关文章

  1. 1
    keon   说道:
    用鼠标粘帖复制就不好使了
    支持(9反对(5回复
  1. 2
    爱美青年   说道:
    请教:为何同时用onkeydown和onkeyup的事件,测试一下只用
    onkeyup事件好像就可以实现了
    firefox 于 2009-6-15 20:47:03 回复
    去掉onkeydown后,连续按键盘不放,在文本域中输入字符,但是“剩余字数”不变。
    支持(6反对(3回复
  1. 3
    RJ   说道:
    貌似很不错阿!不过菜鸟的我看不懂!
    支持(5反对(2回复
  1. 4
    dudo   说道:
    网速太慢,抢沙发真难啊
    支持(6反对(4回复
  1. 5
    calf   说道:
    对javaScript不熟,学习中...
    支持(9反对(7回复
  1. 6
    珍珠粉   说道:
    对javaScript不熟
    支持(11反对(9回复
  1. 7
    海天无影   说道:
    貌似不能用在非IE浏览器下
    支持(6反对(4回复
  1. 8
    coudly   说道:
    没这么简单,要考虑中文与英文混排时的字节长才是有意义的,因为很多数据库字段都是varchar型的,程序上要考虑字节长,而显示给用户的是则是真实的还能写几个字。这可不是那么简单的。
    支持(6反对(4回复
  1. 9
    loofe   说道:
    发现一个有意思地方。这段代码我试了一下。当你的字数超过144时,比如155个字可以输入-11个字。呵呵!!负值
    石头 于 2009-7-14 9:32:51 回复
    请查看20楼的解决方案
    支持(6反对(5回复
  1. 10
    石头   说道:
    如果用户输入了多于140字,后面就显示为负了,所以最好改成
    <script language="javascript">
    function countChar(textareaName,spanName)
    {
    document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length;
    if (document.getElementById(textareaName).value.length>140){
    document.getElementById(spanName).innerHTML='无法输入';
    document.getElementById(textareaName).readonly='true';
    }
    }
    </script>
    可以输入<span id="counter">140</span>字<br/>
    <textarea id="status" name="status" rows="6" cols="40" onkeydown='countChar("status","counter");' onkeyup='countChar("status","counter");'></textarea>
    支持(8反对(7回复

发表留言


点击更换验证码