Oninput, onpropertychange, and onchange usage and differences

1. Preface

Because of work requirements, a function similar to the microblog input box needs to be implemented. When a user dynamically inputs text, the prompt "You can also enter XX characters" is changed ". As shown in the following figure:

  

Therefore, I have studied the differences and usage of oninput, onpropertychange, and onchange, and a bug of onpropertychange in IE browser.

 

2. How to use oninput, onpropertychange, and onchange

L The onchange trigger event must meet two conditions:

A) attributes of the current object are changed and triggered by keyboard or mouse events (the script trigger is invalid)

B) the current object loses focus (onblur );

L onpropertychange triggers events only when the current object attribute changes, but it is exclusive to IE;

L oninput is a non-IE version number of onpropertychange. It supports firefox, opera, and other browsers. However, when it is bound to an object, not all attribute changes of the object can trigger events, it works only when the object value changes.

 

In textarea, if you want to capture the user's keyboard input, you can use onkeyup to check the event. However, onkeyup does not support copying and pasting. Therefore, you need to dynamically monitor the change of the median value in textarea, this requires the combination of onpropertychange (used in IE browser) and oninput (non-IE browser.

 

3. Code implementation:

 

The first method is to directly write the onpropertychange and oninput attributes of textarea.

<Textarea id = "wb_comment_content" name = "wb_comment_content" onblur = "blur_wb_textarea (this);" onfocus = "click_wb_textarea (this);" onpropertychange = "inline (); "oninput =" set_alert_wb_comment (); "class =" gary666 "style =" font-size: 12px; "mce_style =" font-size: 12px; "> You are welcome to come to the micro-evaluation car every day ......

 

Assume that you want to use JavaScript to set attributes of textarea, for example:

If (isIE) {document. getElementById ("wb_comment_content "). onpropertychange = set_alert_wb_comment ();} else // you need to use addEventListener to note the upload event {document. getElementById ("wb_comment_content "). addEventListener ("input", set_alert_wb_comment, false );}

 

Other functions

 

Function click_wb_textarea (obj) {if (obj. value = obj. defaultValue) {obj. value = "";} // obj. className = ""; // This way, when the class name is set to ie, the bug obj will not be triggered by onpropertychange when the first character is entered. style. color = "#000"; return false;} function blur_wb_textarea (obj) {if (obj. value = "") {// obj. className = "gary666"; obj. style. color = "#666"; obj. value = obj. defaultValue;} return false ;}  

 

4. onpropertychange bug

When the code is implemented, it is assumed that the obj. className = "XX"; to change the font style in the textarea input box, there will be a bug in ie that onpropertychange will not be triggered when the first character is entered, so you need to set it like this: obj. style. color = "#000 ";

 

Oninput, onpropertychange, and onchange usage and differences