Desactivar el desplazamiento en `<tipo de entrada = número>`

¿Es posible desactivar la rueda de desplazamiento cambiando el número en un campo de número de entrada? Me he metido con CSS específico de webkit para eliminar la ruleta, pero me gustaría deshacerme de este comportamiento por completo. Me gusta usarlo type=numberya que muestra un buen teclado en iOS.

Evite el comportamiento predeterminado del evento de rueda del mouse en elementos de número de entrada como lo sugirieron otros (llamar a "blur ()" normalmente no sería la forma preferida de hacerlo, porque eso no sería lo que el usuario desea).

PERO. Evitaría escuchar el evento de la rueda del mouse en todos los elementos de número de entrada todo el tiempo y solo lo haría cuando el elemento está enfocado (ahí es cuando existe el problema). De lo contrario, el usuario no puede desplazarse por la página. cuando el puntero del mouse está en cualquier lugar sobre un elemento de número de entrada.

Solución para jQuery:

// disable mousewheel on a input number field when in focus
// (to prevent Cromium browsers change the value when scrolling)
$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

(Delegue los eventos de enfoque al elemento de formulario circundante, para evitar a muchos oyentes de eventos, que son perjudiciales para el rendimiento).

$(document).on("wheel", "input[type=number]", function (e) {
    $(this).blur();
});

Un oyente de eventos para gobernarlos a todos

Esto es similar a @Simon Perepelitsa 's respuesta en js puros, pero un poco más simple, ya que pone un detector de eventos en el elemento documento y comprueba si el elemento enfocado es la inserción de números:

document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number"){
        document.activeElement.blur();
    }
});

Si desea desactivar el comportamiento de desplazamiento de valores en algunos campos, pero no en otros, haga lo siguiente:

document.addEventListener("wheel", function(event){
    if(document.activeElement.type === "number" &&
       document.activeElement.classList.contains("noscroll"))
    {
        document.activeElement.blur();
    }
});

con este:

<input type="number" class="noscroll"/>

Si una entrada tiene la clase noscroll, no cambiará en el desplazamiento; de lo contrario, todo permanece igual.

Prueba aquí con JSFiddle

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(event){ this.blur() })

http://jsfiddle.net/bQbDm/2/

Para obtener un ejemplo de jQuery y una solución entre navegadores, consulte la pregunta relacionada:

Detector de eventos HTML5 para desplazamiento de entrada de números: solo Chrome

Simplemente puede usar el HTML onwheel atributo .

Esta opción no tiene ningún efecto sobre el desplazamiento sobre otros elementos de la página.

Y agregar un oyente para todas las entradas que no funcionan en las entradas creadas dinámicamente posteriormente.

Además, puede eliminar las flechas de entrada con CSS.

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

<input type="number" onwheel="this.blur()" />

@Semyon Perepelitsa

Hay una mejor solución para esto. El desenfoque elimina el enfoque de la entrada y ese es un efecto secundario que no desea. En su lugar, debería utilizar evt.preventDefault. Esto evita el comportamiento predeterminado de la entrada cuando el usuario se desplaza. Aquí está el código:

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })

Primero debe detener el evento de la rueda del mouse:

1. Desactivarlo con mousewheel.disableScroll
2. Interceptarlo con e.preventDefault();
3. Quitando el foco del elemento el.blur();

Los dos primeros enfoques detienen el desplazamiento de la ventana y el último elimina el foco del elemento; ambos son resultados indeseables.

Una solución es usar el.blur()y volver a enfocar el elemento después de un retraso:

$('input[type=number]').on('mousewheel', function(){
  var el = $(this);
  el.blur();
  setTimeout(function(){
    el.focus();
  }, 10);
});

Las respuestas proporcionadas no funcionan en Firefox (Quantum). El detector de eventos debe cambiarse de la rueda del mouse a la rueda:

$(':input[type=number]').on('wheel',function(e){ $(this).blur(); });

Este código funciona en Firefox Quantum y Chrome.

Para cualquiera que trabaje con React y busque una solución. Descubrí que la forma más fácil es usar el accesorio onWheelCapture en el componente de entrada como este:

onWheelCapture={e => { e.target.blur() }}

Variación del texto mecanografiado

Typecript necesita saber que está trabajando con un HTMLElement para la seguridad de tipos; de lo contrario, verá muchos Property 'type' does not exist on type 'Element'tipos de errores.

document.addEventListener("mousewheel", function(event){
  let numberInput = (<HTMLInputElement>document.activeElement);
  if (numberInput.type === "number") {
    numberInput.blur();
  }
});

Mientras trataba de resolver esto por mí mismo, noté que en realidad es posible retener el desplazamiento de la página y el enfoque de la entrada mientras deshabilita los cambios de número al intentar volver a disparar el evento capturado en el elemento principal del elemento <input type="number"/>en el que se capturó , simplemente así:

e.target.parentElement.dispatchEvent(e);

Sin embargo, esto causa un error en la consola del navegador, y probablemente no se garantiza que funcione en todas partes (solo probé en Firefox), ya que es un código intencionalmente inválido.

Otra solución que funciona bien al menos en Firefox y Chromium es crear temporalmente el <input>elemento readOnly, así:

function handleScroll(e) {
  if (e.target.tagName.toLowerCase() === 'input'
    && (e.target.type === 'number')
    && (e.target === document.activeElement)
    && !e.target.readOnly
  ) {
      e.target.readOnly = true;
      setTimeout(function(el){ el.readOnly = false; }, 0, e.target);
  }
}
document.addEventListener('wheel', function(e){ handleScroll(e); });

Un efecto secundario que he notado es que puede hacer que el campo parpadee durante una fracción de segundo si tiene un estilo diferente para los readOnlycampos, pero al menos en mi caso, esto no parece ser un problema.

De manera similar, (como se explica en la respuesta de James) en lugar de modificar la readOnlypropiedad, puede cambiar blur()el campo y luego focus()regresar, pero nuevamente, dependiendo de los estilos en uso, puede ocurrir algo de parpadeo.

Alternativamente, como se mencionó en otros comentarios aquí, puede simplemente convocar preventDefault()el evento. Suponiendo que solo maneja wheeleventos en entradas numéricas que están enfocadas y bajo el cursor del mouse (eso es lo que significan las tres condiciones anteriores), el impacto negativo en la experiencia del usuario sería casi nulo.

Si desea una solución que no necesite JavaScript, la combinación de algunas funciones HTML con un pseudoelemento CSS funciona:

span {
  position: relative;
  display: inline-block; /* Fit around contents */
}

span::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* Stretch over containing block */
  cursor: text; /* restore I-beam cursor */
}

/* Restore context menu while editing */
input:focus {
  position: relative;
  z-index: 1;
}

<label>How many javascripts can u fit in u mouth?
  <span><input type="number" min="0" max="99" value="1"></span>
</label>

Esto funciona porque al hacer clic en el contenido de un <label> campo de formulario, se enfocará el campo. Sin embargo, el "panel de ventana" del pseudo-elemento sobre el campo bloqueará los eventos de la rueda del mouse para que no lo alcancen.

El inconveniente es que los botones giratorios arriba / abajo ya no funcionan, pero dijiste que los habías eliminado de todos modos.

En teoría, uno podría restaurar el menú contextual sin requerir que la entrada se enfoque primero: los :hoverestilos no deberían activarse cuando el usuario se desplaza, ya que los navegadores evitan recalcularlos durante el desplazamiento por razones de rendimiento, pero no he cruzado completamente el navegador / dispositivo. probado.

function fixNumericScrolling() {
$$( "input[type=number]" ).addEvent( "mousewheel", function(e) {
    stopAll(e);     
} );
}

function stopAll(e) {
if( typeof( e.preventDefault               ) != "undefined" ) e.preventDefault();
if( typeof( e.stopImmediatePropagation     ) != "undefined" ) e.stopImmediatePropagation();
if( typeof( event ) != "undefined" ) {
    if( typeof( event.preventDefault           ) != "undefined" ) event.preventDefault();
    if( typeof( event.stopImmediatePropagation ) != "undefined" ) event.stopImmediatePropagation();
}

return false;
}

La solución más sencilla es agregar la onWheel={ event => event.currentTarget.blur() }}entrada en sí.