SoFunction
Updated on 2025-03-06

How to determine how many characters are left in the text box?

This article describes the method of JS and jQuery to determine how many characters are left in the text box to enter. Share it for your reference, as follows:

JavaScript part:

function $(id) {
  return (id);
}
var maxLen=255;
function checkMaxInput(){
  if($("summary").>maxLen){
    $("summary").value=$("summary").(0,maxLen);
  }else{
    $("leaves").innerHTML=maxLen-$("summary").;
  }
}

HTML part:

<tr>
 <td>summary：</td>
 <td>
  <html:textarea property="summary" rows="5" cols="60" onkeyup="checkMaxInput()"/>
  <br>
   You can also enter<span class="red" >255</span>Characters
  </td>
</tr>

jQuery plug-in textlimit implements Javascript statistics and limit the number of characters

Use the jQuery plug-in textlimit to realize the function of counting and limiting the number of characters, which can be applied to text boxes and text areas. When entering text, the textlimit plug-in will timely count the number of characters in the current text box and text areas. If the limit is reached, input will not be allowed. At the same time, character deletion speed can be set.

Examples of usage

1. Include the file part

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

2. HTML part

<input type="text" name="test" value=""  /><span>20</span>/256

3. Javascript part

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#test").textlimit("span",256);
});
</script>

When entering text in a text box with ID test, the textlimit plug-in counts the number of currently entered characters and displays them in a span element. As shown in the above renderings, the textlimit interface is as follows:

textlimit(counter_el, thelimit, speed)

Interface parameter description:

  • counter_elA selector label indicating the current statistics, such as: span
  • thelimitIndicates the limit number, that is, the maximum number of inputs, such as: 256
  • speedIndicates the speed of deleting characters, the default is 15. Note that if not required, it can be set to -1, but cannot be 0.

Note: English characters and Chinese characters are counted as one character

The textlimit plug-in statistics and limit the number of characters is very simple. For details, you can take a look at the textlimit library file, which is very worth recommending.

/*
 * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields
 *
 * pass '-1' as speed if you don't want the char-deletion effect. (don't just put 0)
 * Example: jQuery("Textarea").textlimit('',256)
 *
 * $Version: 2009.07.25 +r2
 * Copyright (c) 2009 Yair Even-Or
 * @
*/
(function(jQuery) {
  =function(counter_el, thelimit, speed) {
    var charDelSpeed = speed || 15;
    var toggleCharDel = speed != -1;
    var toggleTrim = true;
    var that = this[0];
    var isCtrl = false;
    updateCounter();
    function updateCounter(){
      if(typeof that == "object")
        jQuery(counter_el).text(thelimit - +" characters remaining");
    };
     (function(e){
      if( == 17) isCtrl = true;
      var ctrl_a = ( == 65 && isCtrl == true) ? true : false; // detect and allow CTRL + A selects all.
      var ctrl_v = ( == 86 && isCtrl == true) ? true : false; // detect and allow CTRL + V paste.
      // 8 is 'backspace' and 46 is 'delete'
      if(  >= thelimit &&  != '8' &&  != '46' && ctrl_a == false && ctrl_v == false)
        ();
    })
    .keyup (function(e){
      updateCounter();
      if( == 17)
        isCtrl=false;
      if(  >= thelimit && toggleTrim ){
        if(toggleCharDel){
          // first, trim the text a bit so the char trimming won't take forever
          // Also check if there are more than 10 extra chars, then trim. just in case.
          if ( ( - thelimit) > 10 )
             = (0,thelimit+100);
          var init = setInterval
            (
              function(){
                if(  <= thelimit ){
                  init = clearInterval(init); updateCounter()
                }
                else{
                  // deleting extra chars (one by one)
                   = (0,-1); jQuery(counter_el).text('Trimming... '+(thelimit - ));
                }
              } ,charDelSpeed
            );
        }
        else  = (0,thelimit);
      }
    });
  };
})(jQuery);

PS: Here are two related online tools for your reference:

Word count tool:
http://tools./code/zishutongji

Online character statistics and editing tools:
http://tools./code/char_tongji

For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript mathematical operations usage》、《Summary of JavaScript data structure and algorithm techniques》、《Summary of JavaScript array operation skills》、《A complete collection of operations and techniques related to JavaScript events》、《Summary of JavaScript DOM skills"and"Summary of JavaScript characters and string operation techniques》

I hope this article will be helpful to everyone's JavaScript programming.