月光博客 » 编程开发 » 在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回复
  1. 11
    船长   说道:
    如果是copy&paste呢?没有keydown/keyup每个字.
    支持(5反对(4回复
  1. 12
    撒的发生的   说道:
    撒的发生的asdfsadfasdfasfsadfasf
    支持(6反对(5回复
  1. 13
    wooec   说道:
    Twitter是不是被大陆屏蔽了
    Mihua 于 2009-6-15 12:10:04 回复
    已经解封
    支持(3反对(3回复
  1. 14
    孤独冰尘   说道:
    郁闷呀。昨天休息,今天上班来抢注就迟了,伤心呀。
    另有一个问题请教:跟随你去了嘀咕网,请问你是通过什么方式进行各个微博客的更新呢。看了你的《Twitter的微博客同步方案》,感觉有点复杂哦。谢谢回复!
    支持(5反对(5回复
  1. 15
    fpc   说道:
    来看看!来看看!来看看!
    支持(7反对(8回复
  1. 16
    zhshm   说道:
    很是奇怪,williamlong自己的留言框却不利用文中讲到的技巧
    支持(7反对(8回复
  1. 17
    dudo   说道:
    在chrome下看这篇博客,被撑开了~~~ 老大修改一下吧!
    abnerfan 于 2009-6-14 22:40:43 回复
    是啊,不太好看,像是菜鸟的博客啊。
    pengyangying 于 2009-6-14 23:02:24 回复
    在谷歌浏览器里是撑大了 呵呵
    williamlong 于 2009-6-14 23:08:42 回复
    修改好了。
    支持(5反对(7回复
  1. 18
    killedman   说道:
    能不能实现字数为零时,禁止输入字符的功能呢?
    zhshm 于 2009-6-15 11:06:34 回复
    当然可以,google一下,多的要死
    石头 于 2009-7-14 9:33:48 回复
    请查看20楼的解决方案
    支持(4反对(6回复
  1. 19
    日记博客   说道:
    支持,不错的东西!
    支持(3反对(5回复
  1. 20
    自由呼吸   说道:
    不错,支持一下。学习先。
    支持(5反对(7回复
  1. 21
    jesse   说道:
    不支持中文输入统计,现在网上基本找不到能统计中文输入字符个数的!如果是英文没问题,中文,尤其是用输入法输入的时候,不能立即触发keypress,keydown,keyup,甚至是onchange等事件,然而twitter可以,twitter的js代码太复杂,现在还未能研究出为何twitter可以实时统计中文输入字符个数。
    支持(4反对(6回复
  1. 22
    猫猫的园地   说道:
    好像标题有一个错别字哦?宇数?
    支持(1反对(6回复

发表留言