JavaScript实现文本框字数统计与剩余字符显示

实现文本框字数统计功能

当前流行的Twitter等微博客平台，提供了一项优秀的用户体验设计：在用户于文本框中输入文字时，系统会自动统计已输入的字符数量，并实时显示用户还能继续输入的字符数。在严格限制140个字的微博客环境中，这种即时提示能够显著增强用户的操作体验。

为了实现这一功能，经过研究证实，其实现过程相当简单，仅需几行代码即可完成输入字符的统计功能。经过实际测试，该方案对文字的统计结果与Twitter等主流微博客平台的显示效果完全一致。

具体实施步骤如下：首先，在页面中增加一个span元素，用于展示剩余的字数；其次，在Textarea元素中添加onkeydown和onkeyup事件监听器，调用一个自定义的JavaScript函数；该函数接收span的id和textarea的id作为参数；最后，在JavaScript函数内部，通过innerHTML属性返回并更新计算得出的剩余字数。

以下是相关的代码示例说明：

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