Heim  >  Artikel  >  Web-Frontend  >  Funktion zum Echtzeitzählen von Wörtern im JavaScript-Eingabefeld

Funktion zum Echtzeitzählen von Wörtern im JavaScript-Eingabefeld

怪我咯
怪我咯Original
2017-07-04 15:05:261608Durchsuche

In diesem Artikel wird hauptsächlich die statistische Aktualisierung der Anzahl der Wörter im JavaScript-Eingabefeld vorgestellt, die einen bestimmten Referenzwert hat

In Front-End-Entwicklung, viele In diesem Fall muss der Eingabeinhalt ü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.

Statistische Aktualisierung der Wortzahl in Echtzeit

Im Folgenden wird [Nachrichteninhalt] als Beispiel für den Entwurf und die Implementierung der realen Zeitliche statistische Aktualisierungsfunktion der Wortanzahl im Eingabefeld.
Die Projektstruktur ist wie folgt:

message

message.css
message.js
message.tpl

1. Definieren Sie Webseitenelemente in der Datei 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. Binden Sie Ereignisse in der Datei message.js Statistiken Zeichen eingeben

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


Das obige ist der detaillierte Inhalt vonFunktion zum Echtzeitzählen von Wörtern im JavaScript-Eingabefeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn