Oninput and onpropertychange monitor changes in the input box values in real time

Oninput and onpropertychange monitor changes in the input box values in real time

The traditional listening input box is usedkeyup,keydown,keypress, OrchangeEvent,keyup,keydown,keypressAn event is triggered after a key-down event is completed, regardless of whether the value of the input box changes or not. You cannot right-click the event [Clipboard]And [Paste]These operations cannot monitor the dynamic change of values using Js. WhilechangeThe event is triggered only after the focus is left the input box and cannot be monitored in real time. Therefore, it is not perfect to listen to the changes in the input box values for these events. IE (ie6-8) can directly use the onpropertychange event to listen in real time (including JS dynamic change value), while standard browsers (including ie9 +) can use HTML5 pay-as-you-go oninput events to listen, however, oninput cannot monitor the value of JS dynamic changes. Although there are many materials on the Internet, many of them have not talked about monitoring JS dynamic changes, today, my colleague asked me this question on the mobile phone, So I summarized it!

Jsfiddler:

You can click here to listen for changes in the input box value.

In IE, onpropertychange monitors changes in input box values in real time.

First, we can make a simple demo to test the Code as follows:

HTML code:

<H2> IE6-8 listens for changes in input box values -- onpropertychange event, you can listen to the JS dynamic setting value </H2> <input type = "text" id = "input"/> <Div id = "value" style = "width: 100%; height: 30px; Border: 1px solid red; margin: 10 p x 0 "> </div>

JS Code:

// Compatible with IE under (IE6-8) keyboard event ie9 does not support this event $ ("# input "). BIND ("propertychange", function (e) {VaR value = values (e.tar get ). val (); $ ("# value" ).html (value) ;}); // is the input box value dynamically changed in IE compatible? $ ("# Input"). Val ("11 ");

Onpropertychange listens to the property attribute of an element, not limited to value. It can also listen to other standard property values, such as the name value of input. The effect can be seen in the link above jsfiddler.

Oninput in a standard browser monitors changes in input box values in real time

The HTML code is as follows:

<! -- Ie9 + standard browser --> <H2> standard browser listens to changes in input box values -- oninput events, and cannot listen to JS dynamic setting values, however, you can monitor changes in the keyboard event value </H2> <input type = "text" id = "input2"/> <Div id = "value2" style = "width: 100%; Height: 30px; Border: 1px solid red; margin: 10 p x 0 "> </div>

The JS Code is as follows:

// Compatible with standard browsers such as chrome Firefox ie9 +, but the dynamic setting value does not support $ ("# input2 "). BIND ('input', function (e) {VaR value = values (e.tar get ). val (); $ ("# value2" ).html (value) ;}); // is the input box value dynamically changed in a compatible standard browser monitored? $ ("# Input2"). Val ("11 ");

The oninput event in a standard browser can also be used to listen for changes in the value of the input box. However, the onpropertychange event is a bit different from the onpropertychange event in IE:

Oninput cannot listen to attributes or values dynamically changed by Js. In particular, I want to use this event on mobile development, but I cannot monitor this event.

The timer function is used to monitor the changes in the input box values of various browsers (including JS dynamic changes to values or attributes ).

The HTML code is as follows:

<H2> The following describes the compatibility of browsers, use the timer </H2> <input type = "text" id = "input3"/> <Div id = "value3" style = "width: 100%; Height: 30px; Border: 1px solid red; margin: 10 p x 0 "> </div>

The JS Code is as follows:

// Compatible with VAR timer = 0, curval = ""; $ ("# input3") in various browsers "). BIND ("propertychange input", function (e) {If (timer) {clearinterval (timer); timer = 0 ;}curval = partition (e.tar get ). val (); $ ("# value3" regular .html (curval); interval () ;}); function interval () {timer = setinterval (function () {If (curval! = $ ("# Input3"). Val () {curval = $ ("# input3"). Val ();
$ ("# Value3" ).html ($ ("# input3 "). val () ;}}, 100) ;}interval (); // dynamically change the input box value in each browser $ ("# input3 "). val ("11 ");

As shown above, the timer is used to continuously detect whether the value is equal to the current value.