javascript - only - Deshabilitar el desplazamiento en `<input type=number>`

input type number size

Question

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

Answer 1

Un oyente de evento para gobernarlos a todos

Esto es similar a la respuesta de @Semyon Perepelitsa en js puros, pero un poco más simple, ya que pone un detector de eventos en el elemento del documento y verifica si el elemento enfocado es una entrada numérica:

document.addEventListener("mousewheel", 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 simplemente haga esto:

document.addEventListener("mousewheel", 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 desplazamiento, de lo contrario todo permanece igual.

Answer 2

@Semyon Perepelitsa

Hay una mejor solución para esto. Blur elimina el foco de la entrada y es un efecto secundario que no desea. Debería usar evt.preventDefault en su lugar. 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(); })

Answer 3

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

PERO. Evitaría escuchar el evento mousewheel en todos los elementos de números de entrada todo el tiempo y solo lo haría, cuando el elemento está enfocado (es cuando existe el problema). De lo contrario, el usuario no puede desplazarse por la página cuando el puntero del mouse está en algún 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(''mousewheel.disableScroll'', function (e) {
    e.preventDefault()
  })
})
$(''form'').on(''blur'', ''input[type=number]'', function (e) {
  $(this).off(''mousewheel.disableScroll'')
})

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

Answer 4

Las respuestas proporcionadas no funcionan en Firefox (Quantum). El detector de eventos necesita ser cambiado de mousewheel a wheel:

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

Este código funciona en Firefox Quantum y Chrome.

Answer 5

Primero debe detener el evento mousewheel por:

1. Desactivándolo con mousewheel.disableScroll
2. Interceptarlo con e.preventDefault();
3. Al eliminar el foco del elemento el.blur();

Los dos primeros enfoques evitan que la ventana se desplace y el último elimina el foco del elemento; ambos son resultados indeseables.

Una solución consiste en utilizar 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);
});

Answer 6

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

Answer 7

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;
}

Answer 8

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

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

Para el ejemplo de jQuery y una solución de navegador cruzado, consulte la pregunta relacionada:

Reproductor de eventos HTML5 para desplazamiento de entrada numérica: solo Chrome