jQuery-Eingabeereignis

Ich habe noch nie von einem Ereignis in jQuery gehört, das aufgerufen wurde, inputbis ich diese jsfiddle sah .

Weißt du warum es funktioniert? Ist es ein Alias ​​für keyupoder so?

$(document).on('input', 'input:text', function() {});

Tritt auf, wenn der Textinhalt eines Elements über die Benutzeroberfläche geändert wird.

Es ist kein richtiger Alias, keyupda keyupes ausgelöst wird, auch wenn die Taste nichts tut (zum Beispiel: Durch Drücken und anschließendes Loslassen der Steuertaste wird ein keyupEreignis ausgelöst ).

Eine gute Möglichkeit, darüber nachzudenken, ist folgende: Es ist ein Ereignis, das ausgelöst wird, wenn sich die Eingabe ändert. Dies umfasst - ohne darauf beschränkt zu sein - das Drücken von Tasten, die die Eingabe ändern (so dass beispielsweise Ctrldas Ereignis nicht von sich aus ausgelöst wird, sondern Ctrl-Vzum Einfügen von Text) und die Auswahl einer Option für die automatische Vervollständigung im Linux-Stil -Klicken Sie auf Einfügen, Ziehen und Ablegen und viele andere Dinge.

Weitere Informationen finden Sie auf dieser Seite und in den Kommentaren zu dieser Antwort.

oninput Ereignis ist sehr nützlich, um Änderungen an Eingabefeldern zu verfolgen.

In IE-Version <9 wird es jedoch nicht unterstützt. Ältere IE-Versionen haben jedoch ein eigenes proprietäres Ereignis onpropertychange, das dasselbe tut wie oninput.

Sie können es also folgendermaßen verwenden:

$(':input').on('input propertychange');

Um eine vollständige Crossbrowser-Unterstützung zu haben.

Da die Eigenschaftsänderung beispielsweise für JEDE Eigenschaftsänderung ausgelöst werden kann, wird die deaktivierte Eigenschaft geändert, und Sie möchten Folgendes einschließen:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Bei Verwendung von jQuery sind die folgenden Effekte identisch:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

Mit dem inputEreignis scheint jedoch nur das zweite Muster in den von mir getesteten Browsern zu funktionieren.

Sie würden also erwarten, dass dies funktioniert, aber es funktioniert NICHT (zumindest derzeit):

$(':text').input(function(){ doSomething(); });

Wenn Sie die Ereignisdelegierung nutzen möchten (z. B. um das Ereignis #containervor dem input.textHinzufügen zum DOM einzurichten ), sollten Sie Folgendes beachten:

$('#container').on('input', ':text', function(){ doSomething(); });

Leider funktioniert es derzeit NICHT!

Nur dieses Muster funktioniert:

$(':text').on('input', function(){ doSomething(); });

BEARBEITET MIT MEHR AKTUELLEN INFORMATIONEN

Ich kann dieses Muster mit Sicherheit bestätigen:

$('#container').on('input', ':text', function(){ doSomething(); });

JETZT FUNKTIONIERT auch in allen "Standard" -Browsern.

Wie claustrofob sagte, wird oninput für IE9 + unterstützt.

Allerdings : „Der oninput Ereignis ist Buggy in Internet Explorer 9. Es wird nicht ausgelöst , wenn Zeichen aus einem Textfeld über die Benutzeroberfläche gelöscht werden , nur dann , wenn Zeichen eingefügt werden. Obwohl das onpropertychange Ereignis in Internet unterstützt Explorer 9, aber ähnlich wie die Bei einem Eingabeereignis ist es auch fehlerhaft, es wird beim Löschen nicht ausgelöst.

Da Zeichen auf verschiedene Arten gelöscht werden können (Rücktaste und Löschen, STRG + X, Befehl Ausschneiden und Löschen im Kontextmenü), gibt es keine gute Lösung, um alle Änderungen zu erkennen. Wenn Zeichen mit dem Befehl Löschen des Kontextmenüs gelöscht werden, kann die Änderung in JavaScript in Internet Explorer 9 nicht erkannt werden. "

Ich habe gute Ergebnisse, die sowohl an die Eingabe als auch an die Eingabe gebunden sind (und die Tastenkombination, wenn Sie möchten, dass sie im IE ausgelöst wird, während Sie die Rücktaste gedrückt halten).

Seien Sie vorsichtig bei der Verwendung von INPUT. Dieses Ereignis wird in IE 11 auf Fokus und Unschärfe ausgelöst. Es wird jedoch bei Änderungen in anderen Browsern ausgelöst.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Ich denke, 'Eingabe' funktioniert hier einfach genauso wie 'Eingabe' im DOM Level O-Ereignismodell.

Übrigens:

Genau wie Seidenfeuer es kommentierte, googelte auch ich nach 'jQuery input event'. Daher wurde ich hierher geführt und war erstaunt zu erfahren, dass 'input' ein akzeptabler Parameter für den Befehl bind () von jquery ist . In jQuery in Action (S. 102, Ausgabe 2008) wird 'Eingabe' nicht als mögliches Ereignis erwähnt (gegenüber 20 anderen von 'Unschärfe' bis 'Entladen'). Es ist wahr, dass auf p. In 92 könnte das Gegenteil durch erneutes Lesen vermutet werden (dh durch einen Verweis auf verschiedene Zeichenfolgenkennungen zwischen Level 0- und Level 2-Modellen). Das ist ziemlich irreführend.

jQuery hat die folgende Signatur für die .on()Methode:.on( events [, selector ] [, data ], handler )

Ereignisse können alle in dieser Referenz aufgeführten Ereignisse sein:

https://developer.mozilla.org/en-US/docs/Web/Events

Sie werden jedoch nicht alle von jedem Browser unterstützt.

Mozilla gibt Folgendes zum Eingabeereignis an:

Das DOM-Eingabeereignis wird synchron ausgelöst, wenn der Wert eines oder -Elements geändert wird. Darüber hinaus wird es auf inhaltsbearbeitbaren Editoren ausgelöst, wenn der Inhalt geändert wird.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

Arbeiten sowohl in IE als auch in Chrome