月光博客

青青子衿, 悠悠我心, 但为君故, 沉吟至今

« 从技术层面分析“绿坝-花季护航”存在的问题同时更新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/ ]

本文链接地址:http://www.williamlong.info/archives/1830.html
  • 文章排行:
  • 2.dudo
  • 在chrome下看这篇博客,被撑开了~~~ 老大修改一下吧!
    abnerfan 于 2009-6-14 22:40:43 回复
    是啊,不太好看,像是菜鸟的博客啊。
    pengyangying 于 2009-6-14 23:02:24 回复
    在谷歌浏览器里是撑大了 呵呵
    williamlong 于 2009-6-14 23:08:42 回复
    修改好了。
  • ip: 58.60.212.*  2009-6-14 22:11:54   回复该留言
  • 4.killedman
  • 能不能实现字数为零时,禁止输入字符的功能呢?
    zhshm 于 2009-6-15 11:06:34 回复
    当然可以,google一下,多的要死
    石头 于 2009-7-14 9:33:48 回复
    请查看20楼的解决方案
  • ip: 61.128.167.*  2009-6-14 23:16:26   回复该留言
  • 5.wooec
  • Twitter是不是被大陆屏蔽了
    Mihua 于 2009-6-15 12:10:04 回复
    已经解封
  • ip: 220.181.65.*  2009-6-14 23:23:33   回复该留言
  • 8.园子
  • 确实很好的用户体验

    也很简洁的代码

    谢谢分享~
  • ip: 123.6.107.*  2009-6-15 8:55:19   回复该留言
  • 9.孤独冰尘
  • 郁闷呀。昨天休息,今天上班来抢注就迟了,伤心呀。
    另有一个问题请教:跟随你去了嘀咕网,请问你是通过什么方式进行各个微博客的更新呢。看了你的《Twitter的微博客同步方案》,感觉有点复杂哦。谢谢回复!
  • ip: 60.166.179.*  2009-6-15 8:59:10   回复该留言
  • 11.爱美青年
  • 请教:为何同时用onkeydown和onkeyup的事件,测试一下只用
    onkeyup事件好像就可以实现了
    firefox 于 2009-6-15 20:47:03 回复
    去掉onkeydown后,连续按键盘不放,在文本域中输入字符,但是“剩余字数”不变。
  • ip: 125.120.160.*  2009-6-15 11:40:45   回复该留言
  • 12.zhshm
  • 很是奇怪,williamlong自己的留言框却不利用文中讲到的技巧
  • ip: 218.4.189.*  2009-6-15 14:30:53   回复该留言
  • 14.RJ
  • 貌似很不错阿!不过菜鸟的我看不懂!
  • ip: 119.40.185.*  2009-6-15 18:28:24   回复该留言
  • 15.loofe
  • 发现一个有意思地方。这段代码我试了一下。当你的字数超过144时,比如155个字可以输入-11个字。呵呵!!负值
    石头 于 2009-7-14 9:32:51 回复
    请查看20楼的解决方案
  • ip: 61.128.167.*  2009-6-15 21:30:58   回复该留言
  • 18.coudly
  • 没这么简单,要考虑中文与英文混排时的字节长才是有意义的,因为很多数据库字段都是varchar型的,程序上要考虑字节长,而显示给用户的是则是真实的还能写几个字。这可不是那么简单的。
  • ip: 58.60.179.*  2009-7-10 9:22:00   回复该留言
  • 19.石头
  • 如果用户输入了多于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>
  • ip: 61.128.167.*  2009-7-14 9:31:16   回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 跟随我的推特:跟随我的推特
  • 跟随新浪微博:跟随新浪微博
  • 通过Google订阅本站
  • 通过鲜果订阅本站
  • 通过电子邮件订阅本站

站内搜索

热文排行

最新评论及回复

最近发表

网站收藏

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.

This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.