2011-04-14 15 views
8

Estoy jugando con algunos elementos HTML5 y me encontré con un comportamiento divertido. Esto solo funciona en Chrome.Oyente HTML5 de eventos para el desplazamiento de entrada numérica: solo Chrome

Utilizando un tipo de entrada de número, puede establecer el mínimo, el máximo y el paso, y obtener flechas hacia arriba y hacia abajo para controlar la entrada. <input type="number" min="0" max="100" step="5" />

He encontrado que al vincular un escucha de evento de clic se capturan presiones en las flechas, ya que un cambio no ocurrirá hasta que el campo esté borroso. También puede usar las teclas de flecha hacia arriba y hacia abajo en su teclado para cambiar el valor dentro de los límites, y un enlace de pulsación de tecla puede recogerlos.

En Chrome, sin embargo, también puede usar la rueda del mouse para cambiar la entrada, pasando el mouse sobre la entrada y desplazándose. Sin embargo, no he podido encontrar una manera de escuchar este evento.

Example on jsfiddle

HTML:

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

Javascript (jQuery):

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

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

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

Cualquier ideas sobre cómo escuchar para que el cambio de desplazamiento? De nuevo, esto solo funciona en Chrome a partir de este escrito.

+1

Aunque no es una respuesta a su pregunta, usted podría también considerar el seguimiento de los cambios en el valor con un bucle setTimeout, en sustitución de todos los controladores de eventos. No es un gran rendimiento, pero funciona con cualquier método de entrada. –

+0

Eso funcionaría totalmente. Incluso acaba de iniciar el temporizador en el enfoque, y matarlo en el desenfoque. Tal caso extremo no me voy a preocupar por la producción, pero tenía curiosidad por el valor teórico. – hookedonwinter

+1

FWIW: parece que Chrome ahora activa un evento de cambio cuando se desplaza sobre un campo de entrada numérica o hace clic en los botones de incremento. –

Respuesta

8

El complemento de jQuery Mouse Wheel parece hacer el truco. http://plugins.jquery.com/project/mousewheel

$('#test').mousewheel(function(){ 
    $(this).after('<br />mouse wheel'); 
}); 
+3

[Bifurqué el JsFiddle del OP con ese complemento] (http://jsfiddle.net/V9Uck/), mostrando su solución – ExtraGravy

+2

Es curiosamente satisfactorio desplazarse con ese ... – hookedonwinter

+2

mientras jQuery no lo admite de fábrica y si no quiere importar un complemento cada vez que falta una función, puede usar un oyente de vanilla '$ ('# test') [0] .addEventListener ('mousewheel', function() { $ ('# prueba '). after ('
scroll '); }); ' – zeachco

Cuestiones relacionadas