Detaillierte Erläuterung von Ereignissen, die durch Änderungen im Inhalt des Eingabe-Tags ausgelöst werden (mit Beispielen)

Dieser Artikel enthält eine detaillierte Erklärung der Ereignisse, die durch Änderungen im Inhalt des Eingabe-Tags ausgelöst werden. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Native Methode

onchange-Ereignis

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

rrree

Das onchange-Ereignis wird ausgelöst, wenn sich der Inhalt ändert und den Fokus verliert. Das heißt, wenn der Fokus verloren geht und sich der Inhalt nicht ändert, wird er nicht ausgelöst. Wenn sich der Inhalt ändert, aber der Fokus nicht verloren geht, wird er nicht in Echtzeit ausgelöst.
js wird nicht ausgelöst, wenn der Wert direkt geändert wird

oninput-Ereignis

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

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

oninput-Ereignis wird in Echtzeit ausgelöst, wenn sich der Eingabeinhalt ändert. Das oninput-Ereignis ist ein Ereignis, das von den meisten Browsern außer IE unterstützt wird und in Echtzeit ausgelöst wird, wenn sich der Wert ändert.
Es wird nicht ausgelöst, wenn js den Wert direkt ändert.

onpropertychange-Ereignis

onpropertychange-Ereignis wird in Echtzeit ausgelöst. Es wird jedes Mal ausgelöst, wenn ein Charakter hinzugefügt oder gelöscht wird. Dieses Ereignis wird jedoch auch durch js-Änderungen ausgelöst Die Veranstaltung ist exklusiv für IE.
Wenn der Eingang auf „disable=true“ gesetzt ist, wird er nicht ausgelöst.

Der Unterschied zwischen dem Ereignis oninput und dem Ereignis onpropertychange:

Das Ereignis onpropertychange wird durch jede Eigenschaftsänderung ausgelöst, während oninput nur ausgelöst wird, wenn sich der Wert ändert. Oninput muss über addEventListener() registriert werden. Die Registrierungsmethode bei „onpropertychange“ ist dieselbe wie bei der allgemeinen Veranstaltung.

Oninput wird in Kombination mit onpropertychange verwendet

Oninput ist ein Standardereignis von HTML5. Es wird verwendet, um Inhaltsänderungen von Textarea-, Input:Text-, Input:Password- und Input:Search-Elementen zu erkennen Die Benutzeroberfläche ist sehr nützlich, sie wird sofort nach der Änderung des Inhalts ausgelöst, im Gegensatz zum onchange-Ereignis, das den Fokus verlieren muss, bevor es ausgelöst wird. Das oninput-Ereignis wird in Versionen unter IE9 nicht unterstützt. Sie müssen stattdessen das einzigartige onpropertychange-Ereignis verwenden, wenn sich die Benutzeroberfläche ändert oder wenn der Inhalt direkt mithilfe eines Skripts geändert wird:

Änderung Der ausgewählte Status des Elements „input:checkbox“ oder „input:radio“ wird geändert und das geprüfte Attribut ändert sich.
Der Wert des input:text- oder textarea-Elements wird geändert und das Wertattribut ändert sich.
Das ausgewählte Element des Auswahlelements wurde geändert und das selectedIndex-Attribut hat sich geändert.
Nachdem Sie das onpropertychange-Ereignis abgehört haben, können Sie das propertyName-Attribut des Ereignisses verwenden, um den geänderten Eigenschaftsnamen abzurufen.

Der Beispielcode zum Sammeln von oninput und onpropertychange zur Überwachung von Inhaltsänderungen im Eingabefeld lautet wie folgt:

// Firefox, Google Chrome, Opera, Safari, Internet Explorer ab Version 9

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

/ / Internet Explorer

function OnInput (event) {
    alert ("The new content: " + event.target.value);
}

Mit jQuery

müssen Sie nur die Ereignisse oninput und onpropertychange gleichzeitig binden:

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" />

Als letztes ist noch zu beachten: Sowohl die Ereignisse oninput als auch onpropertychange haben in IE9 einen kleinen Fehler, das heißt, sie werden nicht ausgelöst, wenn Inhalte über die Befehle zum Ausschneiden und Löschen im Kontextmenü gelöscht werden, in anderen Fällen sind sie jedoch normal Versionen von IE.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Ereignissen, die durch Änderungen im Inhalt des Eingabe-Tags ausgelöst werden (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!