青青子衿, 悠悠我心, 但为君故, 沉吟至今
« 从技术层面分析“绿坝-花季护航”存在的问题同时更新Twitter、饭否、嘀咕和做啥 »

在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>



  除非注明,月光博客文章均为原创,转载请以链接形式标明本文地址

  本文地址:http://www.williamlong.info/archives/1830.html
  • 文章排行:
  • 2.爱美青年
  • 请教:为何同时用onkeydown和onkeyup的事件,测试一下只用
    onkeyup事件好像就可以实现了
    firefox 于 2009-6-15 20:47:03 回复
    去掉onkeydown后,连续按键盘不放,在文本域中输入字符,但是“剩余字数”不变。
  • 2009/6/15 11:40:45   支持(6)反对(3) 回复
  • 3.RJ
  • 貌似很不错阿!不过菜鸟的我看不懂!
  • 2009/6/15 18:28:24   支持(5)反对(2) 回复
  • 7.海天无影
  • 貌似不能用在非IE浏览器下
  • 2009/6/20 10:31:45   支持(6)反对(4) 回复
  • 8.coudly
  • 没这么简单,要考虑中文与英文混排时的字节长才是有意义的,因为很多数据库字段都是varchar型的,程序上要考虑字节长,而显示给用户的是则是真实的还能写几个字。这可不是那么简单的。
  • 2009/7/10 9:22:00   支持(6)反对(4) 回复
  • 9.loofe
  • 发现一个有意思地方。这段代码我试了一下。当你的字数超过144时,比如155个字可以输入-11个字。呵呵!!负值
    石头 于 2009-7-14 9:32:51 回复
    请查看20楼的解决方案
  • 2009/6/15 21:30:58   支持(6)反对(5) 回复
  • 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>
  • 2009/7/14 9:31:16   支持(7)反对(6) 回复
  • 11.船长
  • 如果是copy&paste呢?没有keydown/keyup每个字.
  • 2009/8/6 23:46:42   支持(5)反对(4) 回复
  • 12.撒的发生的
  • 撒的发生的asdfsadfasdfasfsadfasf
  • 2014/3/25 19:49:44   支持(6)反对(5) 回复
  • 13.wooec
  • Twitter是不是被大陆屏蔽了
    Mihua 于 2009-6-15 12:10:04 回复
    已经解封
  • 2009/6/14 23:23:33   支持(3)反对(3) 回复
  • 14.孤独冰尘
  • 郁闷呀。昨天休息,今天上班来抢注就迟了,伤心呀。
    另有一个问题请教:跟随你去了嘀咕网,请问你是通过什么方式进行各个微博客的更新呢。看了你的《Twitter的微博客同步方案》,感觉有点复杂哦。谢谢回复!
  • 2009/6/15 8:59:10   支持(5)反对(5) 回复
  • 16.zhshm
  • 很是奇怪,williamlong自己的留言框却不利用文中讲到的技巧
  • 2009/6/15 14:30:53   支持(7)反对(8) 回复
  • 17.dudo
  • 在chrome下看这篇博客,被撑开了~~~ 老大修改一下吧!
    abnerfan 于 2009-6-14 22:40:43 回复
    是啊,不太好看,像是菜鸟的博客啊。
    pengyangying 于 2009-6-14 23:02:24 回复
    在谷歌浏览器里是撑大了 呵呵
    williamlong 于 2009-6-14 23:08:42 回复
    修改好了。
  • 2009/6/14 22:11:54   支持(5)反对(7) 回复
  • 18.killedman
  • 能不能实现字数为零时,禁止输入字符的功能呢?
    zhshm 于 2009-6-15 11:06:34 回复
    当然可以,google一下,多的要死
    石头 于 2009-7-14 9:33:48 回复
    请查看20楼的解决方案
  • 2009/6/14 23:16:26   支持(4)反对(6) 回复
  • 20.自由呼吸
  • 不错,支持一下。学习先。
  • 2009/6/15 10:16:05   支持(5)反对(7) 回复
  • 21.jesse
  • 不支持中文输入统计,现在网上基本找不到能统计中文输入字符个数的!如果是英文没问题,中文,尤其是用输入法输入的时候,不能立即触发keypress,keydown,keyup,甚至是onchange等事件,然而twitter可以,twitter的js代码太复杂,现在还未能研究出为何twitter可以实时统计中文输入字符个数。
  • 2010/11/20 10:59:29   支持(4)反对(6) 回复
  • 22.猫猫的园地
  • 好像标题有一个错别字哦?宇数?
  • 2009/6/15 18:10:13   支持(1)反对(6) 回复
  • 23.园子
  • 确实很好的用户体验

    也很简洁的代码

    谢谢分享~
  • 2009/6/15 8:55:19   支持(2)反对(9) 回复

发表评论:

 请勿发送垃圾信息、广告、推广信息或链接,这样的信息将会被直接删除。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博
  • 关注认证空间:关注QQ空间
  • 通过电子邮件订阅
  • 通过QQ邮件订阅

站内搜索

热文排行


月度排行

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.