Real-time listening of input boxes

I. There are three methods:

1. onchange ()

2. oninput ()

3. onpropertychange ()

2. onchange ()

This event monitors whether the input value changes. However, it is only triggered when the input box loses focus, and is valid in browsers such as IE, chrome, and Firefox.

3. oninput () & onpropertychange ()

If you want to trigger the input box as long as the value changes without losing focus, this is what you need to be a good friend.

Oninput () & onpropertychange () is applicable to different browsers. oninput () is used in non-ie browsers, while onpropertychange () is used in IE browsers ().

Oninput () & onpropertychange () can be triggered for operations such as keyboard input, cut copy, and cancel redo operations. However, oninput () does not trigger a value assignment to Js, however, onpropertychange () can be triggered by assigning values to Js.

4. Use instances

 1  1 <input type="text" oninput="changeEvent();" onpropertychange="changeEventIe(event);"> 2  2 //触发的事件 3  3 function changeEvent(){ 4  4     //do what u want to do 5  5 } 6  6  7  7 function changeEventIe(event){ 8  8     //判断改变的是否是input的value属性 9  9     if(event.propertyName != ‘value‘) return;10 10     //do what u want to do11 11 12 12 }

 

real-time listening of input boxes