Real-time statistics update code of JS input box word count

In front-end development, input content needs to be verified in many cases. The real-time statistics function, for fixed-length input, allows users to clarify input boundaries in real time and arrange content reasonably.

This article mainly introduces the function of real-time statistical update of word count in the input box

Real-time statistical update of word count

The following will take [Message Content] as an example to design and implement the real-time statistical update function of the number of words in the input box.
The project structure is as follows:

message

message.css
message.js
message.tpl

1. Define web page elements in message.tpl file

//移动端微信公众号开发

    
  

    0/200
  

//web端业务开发

  

2. Bind events in message.js file , used to count Input characters

//移动端 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 = '
消息内容'+ 
'
' +
'
' +
'消息内容超出最大限制0/200
' +
'
';
$("#newtaskform").append(FileName);
$('#msgcontent').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;
    $("#texttips").show();
  }else{
    $("#texttips").hide();
  }
  $(this).parent().find('.contentcount').text(fizeNum);
});

The above is the detailed content of Real-time statistics update code of JS input box word count. For more information, please follow other related articles on the PHP Chinese website!