Welche Ereignisse löst ein <input type = “number” /> aus, wenn sein Wert geändert wird?

93

Ich frage mich nur, ob jemand weiß, welche Ereignisse ein HTML5- <input type="number" />Element auslöst, wenn auf die Aufwärts- / Abwärtspfeile geklickt wird:

Beispiel Nummer Eingabe

Ich verwende bereits ein onblurfür, wenn der Fokus das Eingabefeld verlässt.

javascript html Ian Oxley
quelle
Dies scheint ein Fehler von Chrome Stackoverflow.com/questions/44978087/… zu sein
Oriol Jiménez

Antworten:

73

change wäre das Ereignis, das ausgelöst wird, wenn sich der Wert des Feldes ändert.

Ich denke, das HTML5-Ereignis inputwürde auch ausgelöst.

Jacob Relkin
quelle
36
wird nur oninputausgelöst, wenn auf die Pfeile "Auf" und "Ab" geklickt wird.
N 1.1
2
aber onchange feuert nur bei Unschärfe, zumindest bei Firefox. Ich denke, wir müssen nach Tastendruck suchen.
Andho
onchange und oninput funktionierten beide in Opera, aber nur oninput funktionierte in Chrome (und nur dann, wenn ich vom Event-Handler false zurückgab - andernfalls würde Chrome das oninput-Ereignis wiederholt auslösen)
Ian Oxley
2
changewird nicht ausgelöst, wenn der Wert eingegeben wird, sondern nur, wenn auf die Schaltflächen geklickt wird (zumindest in Firefox).
Timmmm
5
inputist wie eine Fusion zwischenkeyup change
Thanh Trung
37

Ich fand heraus, dass für jQuery der folgende Code Tastatureingaben, Mausradänderungen und Tastenklicks in Chrome sowie Tastatureingaben in Firefox abdeckte

$("input[type=number]").bind('keyup input', function(){
    // handle event
});
Will Moore
quelle
2
Fügen Sie auch 'change' hinzu und es ist perfekt. Sie sollten immer noch auf externe Änderungen achten, und es schadet sowieso nicht, sie hinzuzufügen.
Matt Fletcher
Und auch 'Mausrad', wenn Sie Bildlaufereignisse im Eingabefeld erfassen möchten.
Matt Fletcher
4
Beachten Sie, dass .bind()jetzt zugunsten von.on()
Michael Hays
7

Ich habe das gefunden onkeyupund onchangealles in Chrome 19 behandelt. Dies behandelt die direkte Werteingabe, das Drücken der Pfeiltasten nach oben, das Klicken auf die Schaltflächen und das Scrollen des Mausrads.

onchangeallein würde in Chrome ausreichen, aber andere Browser, die das Feld nur als Textfeld rendern, benötigen die onkeyupBindung, die perfekt funktioniert, um den neuen Wert zu lesen.

Die mousewheelVeranstaltung separat zu binden war weniger erfolgreich. Das Ereignis wurde zu früh ausgelöst - bevor der Feldwert aktualisiert wurde - und gab daher immer den vorherigen Wert des Felds an

Niall King
quelle
Dies gilt auch für Firefox.
Barfuin
5

Das onchangeEreignis wird bei Unschärfe ausgelöst, aber das oninputEreignis wird während der Eingabe ausgelöst. Vielleicht möchten Sie einen Timer auf das oninputEreignis setzen und Ihr onchangeEreignis auslösen , wenn der Benutzer für eine Sekunde aufgehört hat zu tippen?

andho
quelle
3

Es gibt einen aktuellen Fehler in Edge, der verhindert, dass Änderungen oder Eingaben ausgelöst werden, wenn die Pfeiltasten in einer Zahleneingabe verwendet werden.

Lucent
quelle