JavaScript输入框字数实时统计更新       这篇文章主要介绍了JavaScript输入框字数实时统计更新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

字数实时统计更新

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

message 

  message.css
  message.js
  message.tpl 

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

//移动端微信公众号开发
 div 
 textarea id="content" placeholder="新消息内容"
 rows="3" 
 /textarea 
 div 
 span 0 /span /200
 /div 
 /div 
//web端业务开发
 div 
 form id="newtaskform" /form 
 /div 

2.在message.js文件中绑定事件，用以统计输入字符

//移动端 toolti凡科抠图提示形式
$('#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;
 toolti凡科抠图Show('消息内容不能超过200字');
 $(this).parent().find('.contentcount').text(fizeNum);
//web网页span提示形式
FileName = ' div id="text" label id="textlabel" span /span 消息内容 /label '+ 
' div textarea id="msgcontent" name="text" rows="8" /textarea ' +
' div ' +
' span id="textti凡科抠图" 消息内容超出最大限制 /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;
 $("#textti凡科抠图").show();
 }else{
 $("#textti凡科抠图").hide();
 $(this).parent().find('.contentcount').text(fizeNum);

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