it-swarm.com.de

jQuery-Ereignis 'input'

Ich habe noch nie von einem Ereignis in jQuery namens input gehört, bis ich dieses jsfiddle gesehen habe.

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

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

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

Dies ist kein Alias ​​für keyup, da keyup ausgelöst wird, auch wenn die Taste nichts tut (Beispiel: Wenn Sie die Strg-Taste drücken und dann loslassen, wird ein keyup -Ereignis ausgelöst).

Eine gute Art, darüber nachzudenken, ist wie folgt: Es ist ein Ereignis, das immer dann ausgelöst wird, wenn sich die Eingabe ändert. Dies beinhaltet - ist aber nicht beschränkt auf - das Drücken von Tasten, die die Eingabe modifizieren (so löst beispielsweise Ctrl für sich genommen nicht das Ereignis aus, sondern Ctrl-V zum Einfügen von Text wird), Auswählen einer automatischen Vervollständigungsoption, Einfügen mit mittlerem Mausklick im Linux-Stil, Ziehen und Ablegen und viele andere Dinge.

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

178
J David Smith

Das Ereignis oninput ist sehr nützlich, um Änderungen an Eingabefeldern nachzuverfolgen.

Es wird jedoch in IE version <9 nicht unterstützt. Ältere IE version hat jedoch ein eigenes proprietäres Ereignis onpropertychange, das dasselbe wie oninput.

So können Sie es verwenden:

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

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

Da die Eigenschaftsänderung für JEDE Eigenschaftsänderung ausgelöst werden kann, z. B. wenn die deaktivierte Eigenschaft geändert wird, möchten Sie 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 */
    }
});
150
claustrofob

Bei Verwendung von jQuery sind die folgenden Elemente identisch:

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

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

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

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

Wenn Sie die Ereignisdelegierung nutzen möchten (z. B. um das Ereignis auf dem #container vor deinem input.text wird zum DOM hinzugefügt), dies sollte mir einfallen:

$('#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(); });

Funktioniert jetzt auch in allen "Standard" -Browsern.

12
Ifedi Okonkwo

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

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

Da Zeichen auf verschiedene Arten gelöscht werden können (Rücktaste und Entf-Taste, 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 Internet Explorer 9 in JavaScript nicht erkannt werden. "

Ich habe gute Ergebnisse, die sowohl für die Eingabe als auch für die Tastatureingabe (und die Tastatureingabe) gelten, wenn Sie möchten, dass die Tastatureingabe in IE bei gedrückter Rücktaste) ausgelöst wird.

2
Zook

Seien Sie vorsichtig, wenn Sie INPUT verwenden. Dieses Ereignis wird bei Fokus und Unschärfe in IE 11 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

2
Ananda Naphade

Ich denke, 'input' funktioniert hier genauso wie 'oninput' im DOM Level O-Ereignismodell.

Übrigens:

Genau wie Silkfire es kommentierte, googelte ich auch 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 'input' nicht als mögliches Ereignis erwähnt (gegen 20 andere aus 'blur'). abzuladen'). Es ist wahr, dass auf p. 92 könnte das Gegenteil durch ein erneutes Lesen vermutet werden (d. H. Durch einen Verweis auf verschiedene Zeichenkettenidentifikatoren zwischen Level 0- und Level 2-Modellen). Das ist ziemlich irreführend.

1

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

Ereignisse können alle Ereignisse sein, die in dieser Referenz aufgeführt sind:

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

Sie werden jedoch nicht von jedem Browser unterstützt.

Mozilla gibt Folgendes zum Eingabeereignis an:

Das DOM-Eingabeereignis wird synchron ausgelöst, wenn der Wert eines Elements oder geändert wird. Darüber hinaus werden inhaltsbearbeitbare Editoren aktiviert, wenn deren Inhalt geändert wird.

0
Robert Rocha