JavaScript 입력 상자 단어 수 실시간 계산 기능

이 글에서는 주로 입력 상자의 단어 수에 대한 JavaScript 실시간 통계 업데이트를 소개하며, 이는 특정 참조 값을 가지고 있으며 관심 있는 친구들이 참고할 수 있습니다.

프론트 엔드 개발에서는 많은 경우 입력 내용이 확인이 필요합니다. 고정 길이 입력에 대한 실시간 통계 기능을 통해 사용자는 실시간으로 입력 경계를 명확히 하고 내용을 합리적으로 배열할 수 있습니다.

단어수 실시간 통계 업데이트

다음은 [메시지 내용]을 예로 들어 입력창의 단어수 실시간 통계 업데이트 기능을 설계하고 구현한 것입니다.
프로젝트 구조는 다음과 같습니다:

message

message.css
message.js
message.tpl

1 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 . 메시지에서 입력 문자

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

를 계산하기 위한 이벤트 바인딩.

위 내용은 JavaScript 입력 상자 단어 수 실시간 계산 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!