Maison > interface Web > js tutoriel > Fonction de comptage en temps réel du nombre de mots dans la zone de saisie JavaScript

Fonction de comptage en temps réel du nombre de mots dans la zone de saisie JavaScript

怪我咯
Libérer: 2017-07-04 15:05:26
original
1647 Les gens l'ont consulté

Cet article présente principalement la mise à jour statistique en temps réel du nombre de mots dans la zone de saisie JavaScript, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Dans. développement front-end, beaucoup Dans ce cas, le contenu d'entrée doit être vérifié. La fonction de statistiques en temps réel, pour une saisie de longueur fixe, permet aux utilisateurs de clarifier les limites de saisie en temps réel et d'organiser le contenu de manière raisonnable.

Mise à jour statistique en temps réel du nombre de mots

Ce qui suit prendra [Contenu du message] comme exemple pour concevoir et mettre en œuvre le véritable- fonction de mise à jour statistique temporelle du nombre de mots dans la zone de saisie.
La structure du projet est la suivante :

message

message.css
message.js
message.tpl

1. Définissez les éléments de la page Web dans le fichier 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>
Copier après la connexion

2. statistiques Entrez les caractères

//移动端 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);
});
Copier après la connexion


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal