Detailed maxlength properties in textarea strange performance _javascript skills

HTML5 has brought a lot of changes to the form, such as today's maxlength, which restricts the maximum number of characters entered in the input box, and makes it easier for the pasted content to be automatically truncated according to the number of characters.

Recently received this want a demand, limit the user input up to 600 words (Chinese characters and letters do not distinguish), for pasting content also want to be able to automatically truncate, input 600 words can not input.

The first time thought maxlength, basically satisfies the demand, but still has some strange performance.

Look at the following code:

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

The above code to limit the number of characters to 600, and through the Oninput listening to user input, no use KeyDown, because KeyDown can only monitor user keyboard input, for pasting no response ... Oninput can do it.

At this time the direct input 600 words can no longer input, delete some, and then input some, normal performance. The strange thing is if you paste into the textarea a lot of text, think maxlength exist automatically truncated, at this time textarea exactly 600 characters, then you delete some characters, and then try to enter, you will find:

!!!, unable to enter the slot Delete More, then you can continue to enter, but!!! When the input is less than 600 characters, suddenly can not enter the!!!

This is true under Chrome and my Android machine. I don't know why at the moment. Test the next input, there will not be such a situation, and the value of the MaxLength property is less than the case, such as 10 ...

In this way, maxlength is not reliable, write some code on their own, since the oninput so flexible, use it.

Modify the code, remove the textarea maxlength attribute, use input to monitor the value of textarea, more than 600 automatically truncated, resulting in an inability to enter the illusion.

Text.oninput = function () {
  if (text.value.length >=) {
    text.value = text.value.substr (0,600);
  }
  Already.textcontent = text.value.length;
}

If you don't trust, you can continue listening to the KeyDown event, block the default event after entering more than 600 characters, but there are several keys that cannot be prevented: remove the backspace and enter:

Text.onkeydown = function () {
  if (text.value.length >=) {
    //delete: 46 backspace: 8 back: (
    !) ( E.which = ' 46 ' | | E.which = ' 8 ' | | E.which = = ')) {
      e.preventdefault ();}}}

IE8 does not support maxlength properties or oninput, but they have a more powerful approach: Onpropertychange.

Following one end of the code to explain TEXTAREA implementation MaxLength properties

<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= "" Rows= "  
              3"  
              wrap= "virtual"  
              onkeypress= "return (this.value.length<20)" 
              onkeydown= "Textlen (this,20)"  
              Onkeyup= "Textlen (this,20)"  
              onblur= "Maxtext (this,20)" >
   </textarea>