快捷導(dǎo)航

JavaScript輸入框字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新

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

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

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

字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新

下面將以【消息內(nèi)容】為例，設(shè)計(jì)實(shí)現(xiàn)輸入框字?jǐn)?shù)實(shí)時(shí)統(tǒng)計(jì)更新功能。
項(xiàng)目架構(gòu)如下：

message

    message.css
    message.js
    message.tpl

1. 在message.tpl文件中定義網(wǎng)頁(yè)元素

//移動(dòng)端微信公眾號(hào)開(kāi)發(fā)
<div class="weui-cell__bd">
  <textarea id="content" class="weui-textarea" placeholder="新消息內(nèi)容"
                   rows="3">
  </textarea>
  <div class="weui-textarea-counter">
    <span class="contentcount">0</span>/200
  </div>
</div>
//web端業(yè)務(wù)開(kāi)發(fā)
<div class="modal-body" style="box-sizing: border-box;">
  <form id="newtaskform" class="form-horizontal"></form>
</div>

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

//移動(dò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('消息內(nèi)容不能超過(guò)200字');
  }
  $(this).parent().find('.contentcount').text(fizeNum);
});
//web網(wǎng)頁(yè)span提示形式
FileName = '<div class="form-group" id="text"><label class="col-sm-3 control-label" id="textlabel"><span class="dot"></span>消息內(nèi)容</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;">消息內(nèi)容超出最大限制</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);
});