首页 > 语言 > JavaScript > 正文

Javascript实现字数统计

2024-05-06 16:22:37
字体:
来源:转载
供稿:网友

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

字数统计功能,原理是给textarea添加onKeyup事件,事件读取textarea内容并获得长度,并赋值给统计字数的那个文本节点,这里有一点要注意的是添加onKeypress和onKeydown事件也能实现效果,但都有些不足,会在某些情况下造成误解,我都试了下,感觉只用一个onKeyup事件是最明智的选择。

 

 
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>测试文件</title> 
  6. <script> 
  7. function cal_words(){ 
  8. var length = document.getElementById("test").value.length; 
  9. document.getElementById("num").innerHTML = length; 
  10. </script> 
  11. </head> 
  12.  
  13. <body> 
  14. <div class="reply"
  15. <textarea id="test" onKeyUp="cal_words()"></textarea> 
  16. <div>字数:<span id="num">0</span></div> 
  17. </div> 
  18. </body> 
  19. </html> 

以上所述就是本文的全部内容了,希望大家能够喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选