在前端开发中，很多情况下需对输入内容进行验证。实时统计功能，对于定长输入而言，可以让用户实时明确输入界限，并合理安排内容。
字数实时统计更新
下面将以【消息内容】为例，设计实现输入框字数实时统计更新功能。
项目架构如下：
message
message.css
message.js
message.tpl
1. 在message.tpl文件中定义网页元素
//移动端微信公众号开发 <div> <textarea placeholder="新消息内容" rows="3"> </textarea> <div> <span>0</span>/200 </div> </div> //web端业务开发 <div> <form></form> </div>
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 = '<div><label><span></span>消息内容</label>'+ '<div><textarea rows="8"></textarea>' + '<div>' + '<span>消息内容超出最大限制</span><span>0</span>/200</div>' + '</div></div>'; $("#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); });
