Javascript and jquery real-time listening to The oninput and onpropertychange methods of input box values _ javascript skills

This article mainly introduces the oninput and onpropertychange methods of js and jquery real-time listening input box values. The instance analyzes the function of oninput and onpropertychange to automatically match keywords in the drop-down box to listen for changes in the value of the text box in real time, for more information about the oninput and onpropertychange methods of js and jquery real-time listening to input box values, see the example below. Share it with you for your reference. The details are as follows:

I have recently worked on a project. The requirement is that the keyword is automatically matched in the drop-down box. The details are to monitor the change of the value of the text box in real time and then match the relevant content.

The first thing that comes to mind when you start a project is change in JQ. However, this method is immediately excluded because change is triggered only when the focus of the text box is lost. The curve saves the country, and we want to use keydown to solve the problem. Everything else is fine, but this event cannot be triggered when you copy and paste it with the mouse instead of using the keyboard. Therefore, this method is also excluded.

Then, I found that only oninput & onpropertychange of native js meets this requirement, and then I went to the jq api to find the correct method. I was disappointed that I did not find it, however, the bind will indeed bind similar events, that is, input & propertychange. Through testing, it is indeed OK.

The following example is provided:

JQ:

$ ('Input'). bind ('input propertychange', function () {// perform related operations });

Propertychange is designed to be compatible with versions earlier than IE9.

The oninput event in JS is not supported in IE9 or earlier versions and must be replaced by the onpropertychange event unique to IE. This event is triggered when the user interface is changed or the content is directly modified using the script, there are several situations:

The status of the input: checkbox or input: radio element is modified, and the checked attribute is changed.

The value Attribute of the input: text or textarea element is changed.
The selected items of the select element are modified, and the selectedIndex attribute changes.
JS:

If (isIE) {document. getElementById ("input "). onpropertychange = keys ();} else // use addEventListener to register the event {document. getElementById ("input "). addEventListener ("input", keys, false );}

I hope this article will help you design javascript programs.