Quels événements un <input type = "number" /> déclenche-t-il lorsque sa valeur est modifiée?

94

Je me demande simplement si quelqu'un sait quels événements un <input type="number" />élément HTML5 déclenche lorsque l'on clique sur ses flèches haut / bas:

exemple de saisie de numéro

J'utilise déjà un onblurpour lorsque le focus quitte le champ de saisie.

javascript html Ian Oxley
la source
Cela semble être un bug de chrome stackoverflow.com/questions/44978087/…
Oriol Jiménez

Réponses:

73

change serait l'événement qui est déclenché lorsque la valeur du champ change.

Je pense que l'événement HTML5 inputse déclencherait également.

Jacob Relkin
la source
36
seulement oninputest tiré lorsque les flèches « haut » et « bas » sont cliqués.
N 1.1
2
mais onchange ne se déclenche que sur le flou, au moins dans Firefox. Je suppose que nous devrons rechercher la pression sur les touches.
andho
onchange et oninput fonctionnaient tous les deux dans Opera, mais seule oninput fonctionnerait dans Chrome (et seulement alors lorsque je retournais false du gestionnaire d'événements - sinon Chrome déclencherait à plusieurs reprises l'événement oninput)
Ian Oxley
2
changene se déclenche pas lorsque la valeur est saisie, uniquement lorsque les boutons sont cliqués (au moins sur Firefox).
Timmmm
5
inputest comme une fusion entrekeyup change
Thanh Trung
37

J'ai trouvé que pour jQuery, le code suivant couvrait la saisie au clavier, les modifications de la molette de la souris et les clics sur les boutons dans Chrome, ainsi que la saisie au clavier dans Firefox

$("input[type=number]").bind('keyup input', function(){
    // handle event
});
Will Moore
la source
2
Ajoutez du «changement» à cela aussi et c'est parfait. Vous voudrez toujours écouter les modifications externes qui y sont apportées, et il n'y a aucun mal à l'ajouter de toute façon.
Matt Fletcher
Et aussi la «molette de la souris» si vous voulez récupérer les événements de défilement dans le champ de saisie.
Matt Fletcher
4
Notez que .bind()est désormais obsolète en faveur de.on()
Michael Hays
7

J'ai trouvé cela onkeyupet j'ai onchangetout couvert dans Chrome 19. Cela gère la saisie directe de la valeur, la touche fléchée haut en bas, en cliquant sur les boutons et en faisant défiler la molette de la souris.

onchangeseul serait suffisant dans Chrome, mais d'autres navigateurs qui ne rendent le champ que sous forme de zone de texte ont besoin de la onkeyupliaison, qui fonctionne parfaitement pour lire la nouvelle valeur.

Lier l' mousewheelévénement séparément a été moins réussi. L'événement s'est déclenché trop tôt - avant la mise à jour de la valeur du champ - et a donc toujours donné la valeur précédente du champ

Niall King
la source
Ceci est également vrai pour Firefox.
barfuin
5

L' onchangeévénement se déclenche sur le flou, mais l' oninputévénement se déclenche à mesure que vous tapez. Vous voudrez peut-être mettre un minuteur sur l' oninputévénement et déclencher votre onchangeévénement lorsque l'utilisateur a arrêté de taper pendant une seconde?

andho
la source
3

Il existe un bogue actuel dans Edge empêchant le changement ou l'entrée de se déclencher lors de l'utilisation des touches fléchées dans une entrée numérique.

Lucent
la source