The perfect solution for html5 oninput to monitor changes in input box values in real time, html5oninput

The perfect solution for html5 oninput to monitor changes in input box values in real time, html5oninput

In web development, we often encounter situations where the value of the input box needs to be dynamically monitored. If you use the onkeydown, onkeypress, and onkeyup Keyboard Events for monitoring, you cannot listen to the copy, cut, and paste operations of the right-click operation, and it is also very troublesome to process the combination of shortcut keys. Therefore, this article introduces you to a perfect solution: Listen to the value changes in the input box based on the oninput event and the onpropertychange event of the IE event ., It 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. Most mainstream browsers support oninput events, which are not supported by IE9 and must be replaced by the onpropertychange event unique to IE, this event is triggered when the user interface is changed or when the content is directly modified using the script. The following situations apply:

• 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.

After listening to the onpropertychange event, you can use the propertyName attribute of the event to obtain the name of the changed attribute.

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

To use jQuery, you only need to bind the oninput and onpropertychange events at the same time. The sample code is as follows:
$('input').on('input propertychange', function() {    alert($(this).val().length + ' characters');});