The usage and difference of oninput,onpropertychange,onchange "reprint"

1. Preface

Due to work needs, to implement a similar to the micro-BO input box function, when the user dynamically input text, the change prompt "You can also enter XX word." As shown in the following:

Therefore, a little research on the difference and usage of oninput,onpropertychange,onchange, as well as onpropertychange in IE browser under a bug.

2, the use of Oninput,onpropertychange,onchange

L OnChange Trigger event must meet two conditions:

A) The current object property is changed and is fired by a keyboard or mouse event (script trigger is invalid)

b) The current object loses focus (onblur);

L Onpropertychange, as long as the current object property changes, will trigger the event, but it is exclusive to IE;

L Oninput is a non-ie browser version of Onpropertychange, supports browsers such as Firefox and Opera, but a little different, when it is bound to an object, not all property changes of that object can trigger events, it only works if the object value changes.

In textarea, if you want to capture the user's keyboard input, check the event with onkeyup, but onkeyup does not support copy and paste, so you need to dynamically monitor the change in the value of textarea. This requires onpropertychange (used in Internet Explorer) and oninput (non-IE browser) to be used together.

3, the Code implementation:

The first method is to write directly to the textarea Onpropertychange and Oninput properties

<textareaID= "Wb_comment_content"name= "Wb_comment_content"onblur= "Blur_wb_textarea (this);"onfocus= "Click_wb_textarea (this);"Onpropertychange= "set_alert_wb_comment ();"Oninput= "set_alert_wb_comment ();"class= "gary666"style= "FONT-SIZE:12PX;"Mce_style= "FONT-SIZE:12PX;">You are welcome to visit our car every day.

If you want to set the properties of textarea with JavaScript, you need to do the following:

if (Isie) {    document.getElementById ("Wb_comment_content"). Onpropertychange = set_alert_wb_comment () ;} Else // need to register an event with AddEventListener {    document.getElementById (false);}

The rest of the functions:

1 functionClick_wb_textarea (obj)2 3 {4 5     if(obj.value==obj.defaultvalue)6 7     {8 9Obj.value= "";Ten  One     } A  -     //obj.classname= ""; This setting of the class name under IE will have the first character when entering the Onpropertychange will not trigger the bug -  theObj.style.color= "#000"; -  -     return false; -  + } -  + functionBlur_wb_textarea (obj) A  at { -  -     if(obj.value== "") -  -     { -  in         //obj.classname= "gary666"; -  toObj.style.color= "#666"; +  -Obj.value=Obj.defaultvalue; the  *     } $ Panax Notoginseng     return false; -  the}

4, Onpropertychange of the bug

When the code is implemented, it is found that in response to the user onclick textarea, if you use Obj.classname= "XX" to change the style of the font in the TextArea input box, Will cause a bug that Onpropertychange will not trigger when the first character is entered under IE, so it needs to be set: Obj.style.color= "#000";

"Article from: http://blog.csdn.net/sunlylorn/article/details/6123355"

The usage and difference of oninput,onpropertychange,onchange "reprint"