js und jquery Echtzeitüberwachung der Methoden oninput und onpropertychange des Eingabefeldwerts

Das Beispiel in diesem Artikel beschreibt die Methoden oninput und onpropertychange von js und jquery, die den Wert des Eingabefelds in Echtzeit überwachen. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Ich habe kürzlich an einem Projekt gearbeitet und die Anforderung bestand darin, Schlüsselwörter im Dropdown-Feld automatisch abzugleichen. Die spezifischen Details bestanden darin, Änderungen im Wert des Textfelds in Echtzeit zu überwachen Zeit und passen Sie dann verwandte Inhalte an.

Als ich das Projekt zum ersten Mal übernahm, dachte ich als Erstes an eine Änderung in JQ, habe diese Methode jedoch sofort ausgeschlossen, da eine Änderung ausgelöst wird, wenn das Textfeld den Fokus verliert. Um das Land zu retten, dachte ich darüber nach, das Problem mithilfe von Keydown zu lösen. Alles andere ist in Ordnung, außer dass dieses Ereignis beim Kopieren und Einfügen mit der Maus statt mit der Tastatur nicht ausgelöst werden kann. Daher entfällt auch diese Methode.

Dann habe ich einige relevante Informationen überprüft und festgestellt, dass nur die Oninput- und Onpropertychange-Funktionen von nativem js diese Anforderung erfüllen. Dann habe ich die API von JQ aufgerufen und war enttäuscht, dass ich sie nicht finden konnte , aber das Binden ähnlicher Ereignisse, also Eingabe und Eigenschaftsänderung, hat den Test bestanden und war tatsächlich kein Problem.

Hier ist ein Beispiel:

JQ:

$('input').bind('input propertychange', function() {
 //进行相关操作
});

Unter anderem: Propertychange dient der Kompatibilität mit Versionen unter IE9.

Das oninput-Ereignis in JS wird in Versionen unter IE9 nicht unterstützt. Es muss durch das einzigartige onpropertychange-Ereignis des IE ersetzt werden. Dieses Ereignis wird ausgelöst, wenn sich die Benutzeroberfläche ändert oder wenn der Inhalt direkt mithilfe eines Skripts geändert wird . Es gibt die folgenden Arten von Situationen:

Der ausgewählte Status des input:checkbox- oder input:radio-Elements wird geändert und das aktivierte 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.
JS:

if(isIE)
{
 document.getElementById("input").onpropertychange = keys();
}
else //需要用addEventListener来注册事件
{
 document.getElementById("input").addEventListener("input", keys, false);
}

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Weitere Artikel zu den oninput- und onpropertychange-Methoden von js und jquery zur Echtzeitüberwachung von Eingabefeldwerten finden Sie auf der chinesischen PHP-Website!