这篇文章主要介绍了javascript输入框字数实时统计更新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在前端开发中，很多情况下需对输入内容进行验证。实时统计功能，对于定长输入而言，可以让用户实时明确输入界限，并合理安排内容。
字数实时统计更新
下面将以【消息内容】为例，设计实现输入框字数实时统计更新功能。
项目架构如下：
message
立即学习“Java免费学习笔记（深入）”；
ZipMarket数字内容/素材交易网站
下载
ZipMarket程序仿自Envato旗下网站，对于想创建数字内容/素材交易平台的站长来说，ZipMarket是一个十分独特和极具创新的解决方案，用户在你的网站注册并购买或出售数字内容/素材作品时，你可以获得佣金；用户推广用户到你的网站购买或出售数字内容/素材时，引入用户的用户也可以获得佣金。实际上，ZipMarket是一套完美的数字内容类自由职业生态系统，功能不仅限于素材交易，除了模板/主题、文
message.css
message.js
message.tpl
1. 在message.tpl文件中定义网页元素
//移动端微信公众号开发
0/200
//web端业务开发
2.在message.js文件中绑定事件，用以统计输入字符
//移动端 tooltips提示形式
$('#content').bind('input propertychange', function () {
var fizeNum = $(this).val().length;
if (fizeNum > 200) {
var char = $(this).val();
char = char.substr(0, 200);
$(this).val(char);
fizeNum = 200;
tooltipsShow('消息内容不能超过200字');
}
$(this).parent().find('.contentcount').text(fizeNum);
});
//web网页span提示形式
FileName = ''+
'
' +
'
' +
'0/200
' +
'';
$("#newtaskform").append(FileName);
$('#msgcontent').bind('input propertychange', function () {
var fizeNum = $(this).val().length;
if (fizeNum > 200) {
var char = $(this).val();
char = char.substr(0, 200);
$(this).val(char);
fizeNum = 200;
$("#texttips").show();
}else{
$("#texttips").hide();
}
$(this).parent().find('.contentcount').text(fizeNum);
});
