js- und jquery-Echtzeitüberwachung der Methoden oninput und onpropertychange des Eingabefelds value_javascript-Fähigkeiten

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 lauten 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, die Änderungen im Wert des Textfelds in Echtzeit zu überwachen und dann den relevanten Inhalt abzugleichen .

Als ich das Projekt zum ersten Mal in Angriff nahm, 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 oninput und onpropertychange von nativem js diese Anforderung erfüllten. Dann ging ich zur API von JQ und war enttäuscht, dass ich sie nicht finden konnte wird tatsächlich so etwas binden. Das Ereignis ist input & propertychange. Nach dem Bestehen des Tests gibt es 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 ersetzt werden. Dieses Ereignis wird ausgelöst, wenn sich die Benutzeroberfläche ändert oder wenn der Inhalt direkt mithilfe eines Skripts geändert wird die folgenden Situationen:

Der ausgewählte Status des Elements „input:checkbox“ oder „input:radio“ wurde geändert und das geprüfte Attribut wurde geändert.

Der Wert des input:text- oder textarea-Elements wird geändert und das Wertattribut ändert sich.
Das ausgewählte Element des Select-Elements wird geändert und das selectedIndex-Attribut ändert sich.
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.