Oninput and Onpropertychange method for real-time listener input box values in JS and jquery _javascript tips

This paper illustrates the Oninput and Onpropertychange method of the input box value of JS and jquery in real time. Share to everyone for your reference. Specifically as follows:

Recently done a project, the demand is the Drop-down box automatically match the keyword, the details are real-time listening text box value changes, and then match the relevant content.

The first thing you think about is the change in JQ, but this method is excluded immediately because the change is triggered when the text box loses focus. Curve to save the nation, think of using KeyDown to solve. Everything else is fine, but when you copy and paste by using the mouse instead of the keyboard, this event cannot be triggered. So this method is also ruled out.

Then, query some relevant data, found only the original JS Oninput & Onpropertychange Meet this requirement, then go to the JQ API to find the appropriate method, very disappointed, did not find, but bind does bind to similar events, that is input & PropertyChange, pass the test, really is no problem.

Now give the example:

JQ:

$ (' input '). Bind (' input PropertyChange ', function () { 
 //related Operations 
});

Where: PropertyChange is designed to be compatible IE9 the following versions.

JS Oninput event in IE9 the following version does not support the need to use IE-specific Onpropertychange event substitution, this event in the user interface changes or use the script directly modify the content of two situations will trigger, there are several situations:

Changed the state of the Input:checkbox or Input:radio element in the selection, and the checked attribute changed.

The value of the Input:text or TEXTAREA element has been modified, and the Value property has changed.
The selected item of the Select element was modified and the SelectedIndex property changed.
Js:

if (Isie) 
{ 
 document.getElementById ("input"). Onpropertychange = keys (); 
else//need to register the event 
{ 
 document.getElementById ("input") with AddEventListener. AddEventListener ("Input", keys, false) ;
}

I hope this article will help you with your JavaScript programming.