JavaScript实现输入框字数实时统计与限制功能

前端输入内容实时统计需求

在前端开发实践中，经常需要对用户的输入内容进行校验。实现字数的实时统计功能，对于有长度限制的输入场景尤为重要，它能让用户即时了解剩余可输入字符数，从而更好地规划输入内容。

实现输入框字数实时统计与更新

消息内容输入框实现示例

接下来，以【消息内容】输入框为例，演示如何实现字数实时统计与限制功能。该功能的实现涉及以下项目文件结构：

message

message.css message.js message.tpl

第一步，在message.tpl模板文件中定义相关的网页元素结构。

//移动端微信公众号开发
<div class="weui-cell__bd">
  <textarea id="content" class="weui-textarea" placeholder="新消息内容"
                   rows="3">
  </textarea>
  <div class="weui-textarea-counter">
    <span class="contentcount">0</span>/200
  </div>
</div>
//web端业务开发
<div class="modal-body" style="box-sizing: border-box;">
  <form id="newtaskform" class="form-horizontal"></form>
</div>

第二步，在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 class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息内容</label>'+ 
'<div class="col-sm-9 input-container "><textarea id="msgcontent" name="text" rows="8" style="width:100%;padding-right:20px"></textarea>' +
'<div class="counter" style="float:right;">' +
'<span id="texttips" style="display: none; color: #ff0000;">消息内容超出最大限制</span><span class="contentcount">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);
});

以上内容即为实现该功能的核心步骤，希望能为相关开发工作提供参考。