Detailed explanation of events triggered by changes in input tag content (with examples)

This article brings you a detailed explanation of the events triggered by changes in the input tag content (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Native method

onchange event

<input type="text" onchange="onc(this)">

function onc(data){
    console.log(data.value);
}

The onchange event is triggered when the content changes and loses focus. That is, if the focus is lost and the content does not change, it will not be triggered. If the content changes but the focus is not lost, it will not be triggered in real time.
js does not trigger when directly changing the value value

oninput event

<input id="inp" type="text" oninput="inp(this)">

function inp(data) {
    console.log(data.value)
}

oninput event is triggered in real time when the input content changes. The oninput event is an event supported by most browsers except IE, and is triggered in real time when the value changes.
js is not triggered when the value is changed directly.

onpropertychange event

The onpropertychange event is triggered in real time. It will be triggered every time a character is added or deleted. This event will also be triggered by js changes, but this event is exclusive to IE.
When input is set to disable=true, it will not be triggered.

The difference between the oninput event and the onpropertychange event:

The onpropertychange event is triggered by any property change, but oninput is only triggered when the value changes. Oninput must be registered through addEventListener() , the onpropertychange registration method is the same as the general event.

Oninput is used in combination with onpropertychange

Oninput is a standard event of HTML5. It is used to detect content changes of textarea, input:text, input:password and input:search elements through the user interface. Very useful, it is triggered immediately after the content is modified, unlike the onchange event which needs to lose focus before it is triggered. The oninput event is not supported in versions below IE9 and needs to be replaced by the IE-specific onpropertychange event. This event will be triggered when the user interface changes or when the content is directly modified using a script. There are the following situations:

Modification The selected state of the input:checkbox or input:radio element is changed, and the checked attribute changes.
The value of the input:text or textarea element is modified, and the value attribute changes.
The selected item of the select element has been modified, and the selectedIndex attribute has changed.
After listening to the onpropertychange event, you can use the propertyName attribute of the event to get the changed property name.

The sample code for collecting oninput & onpropertychange to monitor input box content changes is as follows:

// 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);
    }
}

<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

When using jQuery

, you only need to bind the oninput and onpropertychange events at the same time. The sample code is as follows:

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

The last thing to note is: Both oninput and onpropertychange events have a small bug in IE9, that is, they are not triggered when content is deleted through the cut and delete commands in the right-click menu, but they are normal in other versions of IE.

The above is the detailed content of Detailed explanation of events triggered by changes in input tag content (with examples). For more information, please follow other related articles on the PHP Chinese website!