HTML5 écouteur d'événement pour la saisie du numéro de défilement - Chrome seulement

Je suis en train de jouer autour, avec certains des éléments HTML5, et a couru dans un plaisir de comportement. Cela ne fonctionne que dans google Chrome.

Aide d'une entrée de type de numéro, vous pouvez définir le min, max, et l'étape, et d'obtenir des flèches haut et bas pour contrôler l'entrée. <input type="number" min="0" max="100" step="5" />

J'ai trouvé que la liaison d'un écouteur d'événement clic capture appuie sur les flèches, comme le changement ne fait pas se produire jusqu'à ce que le champ est floue. Vous pouvez également utiliser les touches fléchées haut et bas de votre clavier pour modifier la valeur dans les limites, et d'une touche bind peut aller les chercher.

En Chrome, cependant, vous pouvez également utiliser la molette de votre souris pour modifier l'entrée, en passant la souris sur l'entrée et le défilement. Je n'ai pas été en mesure de trouver un moyen d'écouter cet événement, cependant.

Exemple sur jsfiddle

HTML:

<input type="number" min="0" max="100" step="5" id="test" />

JavaScript (à l'aide de jQuery):

$( '#test' ).click(function(){
   $( this ).after( '<br />click' ); 
});

$( '#test' ).change(function(){
   $( this ).after( '<br />change' ); 
});

$( '#test' ).keypress(function(){
   $( this ).after( '<br />keypress' ); 
});

Aucune idée sur la façon d'écouter que de défilement changement? Encore une fois, cela ne fonctionne que dans google Chrome, de cette écriture.

Alors pas de réponse à votre question, vous pourriez aussi envisager le suivi des changements de la valeur avec un setTimeout boucle, le remplacement de tous les gestionnaires d'événements. Pas de grandes performances, mais fonctionne avec n'importe quelle méthode d'entrée.
Qui serait totalement le travail. Même juste de démarrer le minuteur sur l'objet, et de le tuer sur le flou. Un tel cas limite, je ne vais pas vous inquiéter sur la production, mais j'étais curieux de la valeur théorique.
FWIW - il ressemble à chrome tire maintenant un événement de changement lorsque vous faites défiler sur un numéro de champ de saisie ou cliquez sur les boutons d'incrémentation.

OriginalL'auteur hookedonwinter | 2011-04-14

  1. 8

    Le jQuery Molette de la Souris plugin semble faire l'affaire. http://plugins.jquery.com/project/mousewheel

    $( '#test' ).mousewheel(function(){
   $( this ).after( '<br />mouse wheel' ); 
});
    je bifurquais l'OP jsFiddle avec ce plugin, montrant votre solution
    C'est étrangement satisfaisant pour faire défiler avec qui...
    alors que jQuery ne prend pas en charge hors de la boîte et si vous ne voulez pas importer un pluggin chaque fois qu'une fonctionnalité manque, vous pouvez n'en utiliser qu'un à la vanille auditeur $('#test')[0].addEventListener('mousewheel', function(){ $('#test').after( '<br />scroll' ); });

    OriginalL'auteur jeff_bail