The perfect solution for real-time monitoring of input box values: Oninput & Onpropertychange

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.

Oninput is a standard event for HTML5, which is useful for detecting textarea, Input:text, Input:password, and input:search elements that occur through the user interface and are triggered immediately after the content has been modified, unlike The onchange event needs to lose focus before triggering. The compatibility of the Oninput event in the mainstream browser is as follows:

　　

From the above table can be seen, the 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: modified input : The state in the selection of a checkbox or Input:radio element, and the checked property changes. 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.

After you hear the Onpropertychange event, you can use the PropertyName property of the event to get the name of the property that changed.

Collection Oninput & Onpropertychange The sample code that listens for the contents of the input box is as follows:
Finally note: Oninput and Onpropertychange both events in the IE9 have a small bug, that is, the right menu menu in the Cut and delete commands to delete the content is not triggered, and the other version of IE is normal, there is no good solution.

However, Oninput & Onpropertychange is still the best option for listening for changes in input box values.

<script type= "Text/javascript" >/
    /Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function Oninput (event) {
            alert ("The new content:" + event.target.value);
        }
    Internet Explorer
        function onpropchanged (event) {
            if (event.propertyName.toLowerCase () = = "Value") {
                Alert ("The new content:" + event.srcElement.value);
            }
    </script>
 

 
With the JQuery library, you only need to bind Oninput and Onpropertychange two events at the same time, the sample code is as follows:

 


$ (' textarea '). Bind (' input PropertyChange ', function () {
    $ ('. Msg '). HTML ($ (this). Val (). length + ' characters ');
});
 

 

 
The onchange trigger event must meet two conditions: a the current object property changes and is triggered by keyboard or mouse events (script trigger invalid) b) The current object loses focus (onblur); Onpropertychange , Whenever the current object property changes, it triggers the event, but it is IE exclusive; oninput is a onpropertychange non-IE browser version that supports browsers such as Firefox and opera, but there is a difference when it is bound to an object Not all property changes in the object can trigger an event, it only works if the value of the object changes