版权声明：本文为博主原创文章，未经博主允许不得转载。
[html] view
plaincopy
效果如上面两图。
页面代码为：
<dd class="editabcont">
<textarea name="note" id="message" cols="" rows="" style="width: 370px; height: 128px; border: 1px solid #ccc"></textarea>
<p>
<em>optional</em><span><b id="num" style="color:#ff0000">8000</b> characters left</span></p>
</dd>
js代码为：
[javascript] view
$(document).ready(function() {
initbind();
})
function initbind()
{
$("#message").blur(function(){ checkmessage();});
$("#message").keyup(function() { checkmessage(); });
$("#message").keydown(function() { checkmessage(); });
}
function checkmessage()
$("#num").html(8000 - $('#message').val().length);
var pattern = /[\s\s]{20,2000}/;
if($('#message').val().length != 0)
{
if(!pattern.test($('#message').val()) || $('#message').val().length < 20)
err = false;
$("#errmessage").show();
}
else
err = true;
$("#errmessage").hide();
if (err1 && err2 && err3 && err) {
$("#button1error").hide();
}
}
else
现在流行的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>