Detailed explanation of the strange behavior of maxlength attribute in textarea_javascript skills

HTML5 has brought many changes to forms, such as maxlength, which we are going to talk about today. This attribute can limit the maximum number of characters entered in the input box. What is more convenient is that the pasted content can also be automatically truncated based on the number of characters.

I recently received a request to limit users to input a maximum of 600 characters (Chinese characters and letters are not distinguished), and the pasted content must also be automatically truncated. After 600 characters are entered, input cannot be made.

The first thing I thought of was maxlength, which basically meets the needs, but there are still some weird behaviors.

Look at the code below:

<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
  already.textContent = text.value.length;
}

The above code limits the number of input characters to 600 and monitors user input through oninput. Keydown is not used because keydown can only monitor user keyboard input and has no response to pasting. . . oninput can do it.

At this time, after entering 600 words directly, you can no longer enter. Delete some and enter some again, and the performance will be normal. The strange thing is that if you paste a lot of text into a textarea, it will be automatically truncated because of the existence of maxlength. At this time, there are exactly 600 characters in the textarea. At this time, if you delete some characters and then try to input again, you will find:

Holy shit, I can’t type! ! ! Delete more and you can continue typing, but! ! ! When I entered less than 600 characters, I suddenly couldn’t enter again! ! !

This happens under chrome and my android machine. . The reason is not known yet. After testing the input, this situation will not occur, and if the value of the maxlength attribute is smaller, this situation will not occur, such as 10. . .

In this case, maxlength is unreliable. Just write more code yourself. Since oninput is so flexible, use it.

Modify the code, remove the maxlength attribute of textarea, and use input to monitor the value of textarea. If it exceeds 600, it will be automatically truncated, creating the illusion that input is impossible.

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

If you are not worried, you can continue to monitor the keydown event and prevent the default event after inputting more than 600 characters, but there are several keys that cannot be prohibited: delete backspace and carriage return:

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE8 and below do not support the maxlength attribute nor oninput, but they have a more powerful method: onpropertychange.

The following explains how textarea implements the maxlength attribute through one end of the code

<script language="javascript" type="text/javascript"> 
function textlen(x,y){ 
 var thelength = x.value.length; 
 window.status=thelength+' of '+y+' maximum characters.'; 
} 
function maxtext(x,y){ 
 tempstr = x.value 
 if(tempstr.length>y){ 
  x.value = tempstr.substring(0,y); 
 } 
 textlen(x,y); 
} 
</script> 
<form name="myform"> 
   <textarea name="mytextarea"  
              cols="45"  
              rows="3"  
              wrap="virtual"  
              onkeypress="return(this.value.length<20)" 
              onkeydown="textlen(this,20)"  
              onkeyup="textlen(this,20)"  
              onblur="maxtext(this,20)">
   </textarea> 
</form>