Aktualisierungscode für Echtzeitstatistiken der Wortanzahl im JS-Eingabefeld

In der Frontend-Entwicklung müssen Eingabeinhalte in vielen Fällen überprüft werden. Die Echtzeit-Statistikfunktion für Eingaben mit fester Länge ermöglicht es Benutzern, Eingabegrenzen in Echtzeit zu klären und Inhalte sinnvoll anzuordnen.

In diesem Artikel wird hauptsächlich die Funktion der statistischen Echtzeitaktualisierung der Wortanzahl im Eingabefeld vorgestellt

Echtzeitstatistik Aktualisierung der Wortanzahl

Im Folgenden wird [Nachrichteninhalt] als Beispiel verwendet, um die Funktion zur statistischen Echtzeitaktualisierung der Anzahl der Wörter im Eingabefeld zu entwerfen und zu implementieren.
Die Projektstruktur ist wie folgt:

message

message.css
message.js
message.tpl

1. Definieren Sie Webseitenelemente in der message.tpl-Datei

//移动端微信公众号开发
<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. Binden Sie das Ereignis< in message.js-Datei 🎜>, wird zum Zählen von Eingabezeichen verwendet

//移动端 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 = &#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);
});

Das obige ist der detaillierte Inhalt vonAktualisierungscode für Echtzeitstatistiken der Wortanzahl im JS-Eingabefeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!