ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript入力ボックスのリアルタイム単語数カウント機能

JavaScript入力ボックスのリアルタイム単語数カウント機能

怪我咯
リリース: 2017-07-04 15:05:26
オリジナル
1646 人が閲覧しました

この記事では主に、入力ボックス内の単語数のJavaScriptリアルタイム統計更新を紹介します。これは、興味のある友人はそれを参照できます

フロントエンド開発では、多くの場合、入力内容が表示されます。確認する必要があります。固定長入力のリアルタイム統計機能により、入力境界をリアルタイムで明確にし、コンテンツを合理的に配置できます。

単語数のリアルタイム統計更新

以下では、[メッセージコンテンツ]を例として、入力ボックスの単語数のリアルタイム統計更新機能を設計および実装します。
プロジェクトの構造は次のとおりです:

message

message.css
message.js
message.tpl

1. message.tpl ファイルで Web ページ要素を定義します

//移动端微信公众号开发
<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. 入力文字をカウントするためのjsファイル内のイベント

//移动端 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);
});
ログイン後にコピー


以上がJavaScript入力ボックスのリアルタイム単語数カウント機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート