JavaScript中统计Textarea字数并提示还能输入的字符

更新时间：2014年06月10日 09:56:51 投稿：whsnow

是在文本框中输入文字的时候，会自动统计输入的字符，并显示用户还能输入的字符，其实js也可以实现，下面就以示例的方式为大家讲解下

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

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

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

核心Javascript代码：

复制代码代码如下:

 
<span style="font-size:18px;"><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></span>

PS：本站还提供了一个关于字数统计的在线工具，感兴趣的朋友可以参考一下：

在线字数统计工具：

http://tools.jb51.net/code/zishutongji

您可能感兴趣的文章:

Javascript 命名空间模式
命名空间是通过为项目或库创建一个全局对象，然后将所有功能添加到该全局变量中。通过减少程序中全局变量的数量，实现单全局变量，从而在具有大量函数、对象和其他变量的情况下不会造成全局污染，同时也避免了命名冲突等问题
2013-11-11
21个值得收藏的Javascript技巧
在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率
2014-02-02
JavaScript实现拖动模态框
这篇文章主要为大家详细介绍了JavaScript实现拖动模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js DOM模型操作
文档对象模型DOM（Document Object Module）定义了用户操作文档对象的接口，它使得用户对HTML有了空前的访问能力，并使开发者能将HTML作为XML文档来处理。
2009-12-12
通过 Dom 方法提高 innerHTML 性能
此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。
2008-03-03
HTML Table 空白单元格补全的简单实现
下面小编就为大家带来一篇HTML Table 空白单元格补全的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
不错的JS中变量相关的细节分析
不错的JS中变量相关的细节分析...
2007-08-08
antd upload控件的data参数使用
这篇文章主要介绍了antd upload控件的data参数使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
JavaScript访问样式表代码
在web页面中，我们经常需要通过修改样式（style）来达到更好的用户体验，需要的朋友可以参考下。
2010-10-10
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
今天小编就为大家分享一篇解决layui-table单元格设置为百分比在ie8下不能自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09