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

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