MaxLength properties Strange expression in textarea

HTML5 has brought a lot of changes to the form, such as today's maxlength, this attribute can limit the input box input maximum character number, more convenient for the pasted content can also be automatically truncated according to the number of characters.

Recently received this to a demand, limit the user to enter a maximum of 600 words (Chinese characters and letters do not distinguish), for the pasted content also to be able to automatically truncate, input 600 words can not be entered.

The first time to think of MaxLength, basically meet the needs, but still have some weird performance.

Look at the following code:

<textareaname= "text"ID= "text"maxlength= "All"></textarea><P><spanID= "Already"></span>/<span>600</span></P>text.oninput = function () {already.textcontent = text.value.length;}

The above code limit the number of input characters is 600, and through the Oninput listener user input, no use KeyDown, because KeyDown can only listen to the user keyboard input, no reaction to the paste ... Oninput can do it.

This time directly input 600 words can no longer be entered, delete some, and then input some, the performance is normal. The strange thing is if you paste into the textarea a lot of text, thinking that the existence of maxlength automatically truncated, at this time there is exactly 600 characters in the textarea, when you delete some characters, and then try to enter, you will find:

The horizontal groove, cannot enter!!! Then delete more, then you can continue to enter, but!!! When the input is less than 600 characters, suddenly can not input!!!

This will happen under Chrome and under my Android machine. Don't know the reason for the moment. Test the next input, there will be no such situation, and the value of the MaxLength property is smaller, there is no such situation, such as 10 ...

In this case maxlength is not reliable, just write more code, since oninput so flexible, use it.

Modify the code, remove the TextArea MaxLength property, use input to listen to the value of the textarea, more than 600 is automatically truncated, resulting in an illusion can not be entered.

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

If you are not sure, you can continue to listen for the KeyDown event, block the default event after entering more than 600 characters, but there are several keys that cannot be disabled: Delete the backspace and enter:

function () {    if(text.value.length >=) {        //  Delete: 46 backspace: 8 return car:        if (! (E.which = = ' "" | | e.which = = ' 8 ' | | e.which = = ') ") {            e.preventdefault ();      }}}

IE8 The following does not support the MaxLength property, nor does it support oninput, but they have a more powerful method: Onpropertychange.

Not figured out is the cause of this strange phenomenon, if there is know, ask to inform ...

Weekend change bug can't afford ....

MaxLength properties Strange expression in textarea