jQuery-Eingabeereignis

206

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() {});
Seidenfeuer
quelle
12
Außer changeerst dann, wenn das Feld den Fokus verloren hat. inputfeuert sofort.
Jcsanyi
3
Haben Sie versucht, es zu suchen?
undefiniert
2
@undefined Ja, das hätte ich, sonst hätte ich keine Frage dafür erstellt. Das einzige, was bei Google auftaucht, sind Artikel über das input Element und das Anhängen von Ereignissen.
Seidenfeuer
3
Diese Frage beantwortet wunderbar alle Konzepte - stackoverflow.com/questions/15727324/…
GemK

Antworten:

196

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.

J David Smith
quelle
11
Wissen Sie, ob jQuery die fehlende Browserunterstützung ausmacht? (IE8, IE9 Inkonsistenzen usw.)
jcsanyi
4
Ich habe gerade 'js input event' gegoogelt. Es ist ein Händchen zu wissen, welche Begriffe verwendet werden müssen, um bei Google zu finden, was Sie wollen. es kommt mit Erfahrung. Und dann zeichnet Google natürlich alles auf und verwendet es, um zu erfahren, was Sie tatsächlich wollen. Die meisten meiner Suchanfragen beziehen sich auf API-Dokumente und Programmierfragen. Im Laufe der Zeit wurde mir klar, dass bei der Suche nach Dingen wahrscheinlich API-Dokumente und Programmierantworten angezeigt werden sollten.
J David Smith
3
Nun, ich suchte nach "jQuery input event", ich hatte keine Ahnung, dass es sich um ein ursprüngliches JS-Ereignis handelt. Auch hier stammen die ersten Ergebnisse normalerweise von SO, was ich meistens als De-facto-Antworten / offizielle Informationsquellen betrachte.
Seidenfeuer
18
inputist eigentlich mehr als nur ein Filter keyup, zum Beispiel wird es auch ausgelöst , wenn der Wert aus der Liste der zuvor verwendeten Werte ausgewählt wurde ... Es war etwas, das sehr schwer zu handhaben wäre, wenn es kein inputEreignis gäbe .
Szeryf
2
oninputWird auch ausgelöst, wenn der Text mit der Maus geändert wird (entweder per Drag & Drop oder über ein Rechtsklick-Menü oder einen mittleren Klick zum Einfügen).
Denilson Sá Maia
157

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 */
    }
});
claustrofob
quelle
10
Genau das, was ich brauchte. Danke dir. (Ich hasse es, <IE9 unterstützen zu müssen.)
DaleyKD
Weitere Informationen: "Opera löst kein Eingabeereignis aus, nachdem Text in ein Eingabefeld eingefügt wurde. IE 9 löst kein Eingabeereignis aus, wenn der Benutzer Zeichen aus Eingaben entfernt, die mit Tastatur-, Schnitt- oder Ziehvorgängen gefüllt wurden." developer.mozilla.org/en-US/docs/Web/Events/…
tkane2000
Es gibt ein Problem mit diesem Code. Wenn für das Eingabeelement die maximale Länge festgelegt ist, wird das Ereignis 'Eingabe' ausgelöst, auch wenn die maximale Länge erreicht ist und der Wert nicht geändert wird
nivcaner
Aber warum nicht einfach zwei getrennte Funktionen? Auf diese Weise müssen Sie den Ereignistyp oder den Eigenschaftsnamen nicht überprüfen. Der Code könnte sich in einer dritten gemeinsam genutzten Funktion befinden.
ADTC
17

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.

Ifedi Okonkwo
quelle
2

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).

Zook
quelle
1

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.

Brice Coustillas
quelle
Vielen Dank für die Eingabe (kein Wortspiel beabsichtigt), dies scheint jetzt ein offizieller Thread zu sein! :)
Seidenfeuer
0

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.

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

Arbeiten sowohl in IE als auch in Chrome

Raj
quelle
bindist veraltet, verwenden Sieon
Tushar