Perfect solution for js/jquery to listen to changes in input box values in real time: oninput & amp; onpropertychange, jqueryoninput

Perfect solution for js/jquery to monitor changes in input box values in real time: oninput & onpropertychange, jqueryoninput

(1) Let's Talk About jquery and useJQueryLibrary, you only need to bind the oninput and onpropertychange events at the same time. Sample Code:

$('#username').bind('input propertychange', function() {$('#content').html($(this).val().length + ' characters');});

　　

(2) for native JS writing, oninput is HTML5The standard event is very useful for detecting content changes that occur through the user interface of textarea, input: text, input: password and input: search elements. It is triggered immediately after the content is modified, unlike the onchange event, it is triggered only when the focus is lost. OninputThe compatibility of events in mainstream browsers is as follows:

As shown in the preceding table,OninputThe event 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 a 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.

When listeningOnpropertychangeAfter the event, you can use the propertyName attribute of the event to obtain the name of the property that has changed.

The sample code of the oninput & onpropertychange collection listening input box content change is as follows:

　　
From: http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/