在前端开发中，很多情况下需对输入内容进行验证。实时统计功能，对于定长输入而言，可以让用户实时明确输入界限，并合理安排内容。

字数实时统计更新

下面将以【消息内容】为例，设计实现输入框字数实时统计更新功能。项目架构如下：

消息

消息。CSS消息。js消息。电信程序设计语言（Telecommunications Programming Language的缩写）

1.在message.tpl文件中定义网页元素

//移动端微信公众号开发div class=' weui-cell _ _ BD '文本区域id=' content ' class=' weui-text area '占位符='新消息内容row=' 3 '/文本区域div class=' weui-文本区域-计数器' span class='内容计数' 0/span/200/div/div//web端业务开发div class=' modal-body ' style=' box-size :边框-box；窗体id='新任务窗体' class='窗体-水平'/窗体/div 2 .在message.js文件中绑定事件，用以统计输入字符

//移动端工具提示提示形式$('#content ').bind('input propertychange '，function () { var fizeNum=$(this)).val().长度；if (fizeNum 200) { var char=$(this).val()；char=char.substr(0，200)；$(这个)。val(char)；fizeNum=200工具提示显示('消息内容不能超过200字');} $(这个)。父项()。查找('。内容计数').文本(FiZenum)；});//web网页跨度提示形式FileName=' div class=' form-group ' id=' text ' label class=' col-sm-3 control-label ' id=' text label ' span class=' dot '/span消息内容/label ' ' div class=' col-sm-9 input-container '文本区域id=' msg content ' name=' text ' rows=' 8 ' style=' width :100%；填充-右：20 px '/文本区域' ' div class=' counter ' style=' float : right；' span id='文本提示' style=' display : nonecolor: # ff0000 '消息内容超出最大限制/span span class='内容计数' 0/span/200/div ' '/div/div '；$('#newtaskform ').追加(FIlename)；$('#msgcontent ').bind('input propertychange '，function () { var fizeNum=$(this)).val().长度；if (fizeNum 200) { var char=$(this).val()；char=char.substr(0，200)；$(这个)。val(char)；fizeNum=200$('#texttips ').show()；}else{ $('#texttips ').hide()；} $(这个)。父项()。查找('。内容计数').文本(FiZenum)；});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。