首页 >web前端 >js教程 >JavaScript中如何实现输入框字数实时统计更新的示例代码分享

JavaScript中如何实现输入框字数实时统计更新的示例代码分享

黄舟
黄舟原创
2017-06-18 11:49:571431浏览

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

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

字数实时统计更新

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

message 

    message.css
    message.js
    message.tpl 

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


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

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


//移动端 tooltips提示形式
$(&#39;#content&#39;).bind(&#39;input propertychange&#39;, function () {
  var fizeNum = $(this).val().length;
  if (fizeNum > 200) {
    var char = $(this).val();
    char = char.substr(0, 200);
    $(this).val(char);
    fizeNum = 200;
    tooltipsShow(&#39;消息内容不能超过200字&#39;);
  }
  $(this).parent().find(&#39;.contentcount&#39;).text(fizeNum);
});
//web网页span提示形式
FileName = &#39;<p class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息内容</label>&#39;+ 
&#39;<p class="col-sm-9 input-container "><textarea id="msgcontent" name="text" rows="8" style="width:100%;padding-right:20px"></textarea>&#39; +
&#39;<p class="counter" style="float:right;">&#39; +
&#39;<span id="texttips" style="display: none; color: #ff0000;">消息内容超出最大限制</span><span class="contentcount">0</span>/200</p>&#39; +
&#39;</p></p>&#39;;
$("#newtaskform").append(FileName);
$(&#39;#msgcontent&#39;).bind(&#39;input propertychange&#39;, 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(&#39;.contentcount&#39;).text(fizeNum);
});

以上是JavaScript中如何实现输入框字数实时统计更新的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn