JavaScript輸入框字數實時統(tǒng)計更新

更新時間：2017年06月17日 15:24:36 作者：m0_37893932

這篇文章主要介紹了JavaScript輸入框字數實時統(tǒng)計更新，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在前端開發(fā)中，很多情況下需對輸入內容進行驗證。實時統(tǒng)計功能，對于定長輸入而言，可以讓用戶實時明確輸入界限，并合理安排內容。

字數實時統(tǒng)計更新

下面將以【消息內容】為例，設計實現(xiàn)輸入框字數實時統(tǒng)計更新功能。
項目架構如下：

message

    message.css
    message.js
    message.tpl

1. 在message.tpl文件中定義網頁元素

//移動端微信公眾號開發(fā)
<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端業(yè)務開發(fā)
<div class="modal-body" style="box-sizing: border-box;">
  <form id="newtaskform" class="form-horizontal"></form>
</div>

2.在message.js文件中綁定事件，用以統(tǒng)計輸入字符

//移動端 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);
});