Desative a rolagem em `<input type = number>`

É possível desativar a roda de rolagem alterando o número em um campo de entrada de número? Eu mexi com CSS específico do webkit para remover o botão giratório, mas gostaria de me livrar totalmente desse comportamento. Eu gosto de usar type=numberporque traz um bom teclado no iOS.

Impedir o comportamento padrão do evento mousewheel em elementos de número de entrada como sugerido por outros (chamar "blur ()" normalmente não seria a maneira preferida de fazer isso, porque não seria o que o usuário deseja).

MAS. Eu evitaria ouvir o evento mousewheel em todos os elementos de número de entrada o tempo todo e só faria isso quando o elemento estiver em foco (é quando o problema existe). Caso contrário, o usuário não pode rolar a página quando o ponteiro do mouse estiver em qualquer lugar sobre um elemento de número de entrada.

Solução 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 eventos de foco para o elemento de formulário circundante - para evitar muitos ouvintes de eventos, que são ruins para o desempenho).

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

Um ouvinte de evento para governar todos eles

Isto é semelhante ao @Simon Perepelitsa 's resposta em js puro, mas um pouco mais simples, já que coloca um ouvinte de evento no elemento documento e verifica se o elemento focalizado é uma entrada de número:

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

Se você deseja desativar o comportamento de rolagem de valor em alguns campos, mas não em outros, basta fazer isso:

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

com isso:

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

Se uma entrada tiver a classe noscroll, ela não mudará na rolagem, caso contrário, tudo permanecerá igual.

Teste aqui com JSFiddle

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

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

Para obter um exemplo de jQuery e uma solução para vários navegadores, consulte a pergunta relacionada:

Listener de evento HTML5 para rolagem de entrada de número - apenas Chrome

Você pode simplesmente usar o atributo HTML onwheel .

Essa opção não tem efeito na rolagem de outros elementos da página.

E adicionar um ouvinte para todas as entradas não funciona em entradas criadas dinamicamente posteriormente.

Além disso, você pode remover as setas de entrada com 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

Existe uma solução melhor para isso. Desfocar remove o foco da entrada e isso é um efeito colateral que você não deseja. Você deve usar evt.preventDefault em vez disso. Isso evita o comportamento padrão da entrada quando o usuário faz a rolagem. Aqui está o código:

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

Primeiro, você deve interromper o evento da roda do mouse:

1. Desativando com mousewheel.disableScroll
2. Interceptando com e.preventDefault();
3. Ao remover o foco do elemento el.blur();

As duas primeiras abordagens param a janela de rolar e a última remove o foco do elemento; ambos são resultados indesejáveis.

Uma solução alternativa é usar el.blur()e refocar o elemento após um atraso:

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

As respostas fornecidas não funcionam no Firefox (Quantum). O ouvinte de evento precisa ser alterado da roda do mouse para a roda:

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

Este código funciona no Firefox Quantum e Chrome.

Para quem trabalha com React e procura uma solução. Descobri que a maneira mais fácil é usar o prop onWheelCapture no componente de entrada como este:

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

Variação datilografada

O typescript precisa saber que você está trabalhando com um HTMLElement para segurança de tipos, caso contrário, você verá muitos Property 'type' does not exist on type 'Element'tipos de erros.

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

Ao tentar resolver isso por mim mesmo, percebi que é realmente possível manter a rolagem da página e o foco da entrada enquanto desativa as alterações de número tentando disparar novamente o evento capturado no elemento pai do <input type="number"/>no qual foi capturado , simplesmente assim:

e.target.parentElement.dispatchEvent(e);

No entanto, isso causa um erro no console do navegador e provavelmente não é garantido que funcione em todos os lugares (eu só testei no Firefox), pois é um código intencionalmente inválido.

Outra solução que funciona bem pelo menos no Firefox e no Chromium é fazer temporariamente o <input>elemento readOnly, assim:

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

Um efeito colateral que observei é que pode fazer com que o campo pisque por uma fração de segundo se você tiver estilos diferentes para os readOnlycampos, mas, pelo menos no meu caso, isso não parece ser um problema.

Da mesma forma, (conforme explicado na resposta de James), em vez de modificar a readOnlypropriedade, você pode blur()inserir o campo e depois focus()voltar, mas, novamente, dependendo dos estilos em uso, pode ocorrer alguma oscilação.

Como alternativa, conforme mencionado em outros comentários aqui, você pode simplesmente ligar preventDefault()para o evento. Supondo que você apenas manipule wheeleventos em entradas de número que estão em foco e sob o cursor do mouse (é isso que as três condições acima significam), o impacto negativo na experiência do usuário seria quase nulo.

Se você deseja uma solução que não precisa de JavaScript, combinar algumas funcionalidades HTML com um pseudoelemento CSS resolverá o problema:

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>

Isso funciona porque clicar no conteúdo de um <label>que está associado a um campo de formulário focalizará o campo. No entanto, a “vidraça” do pseudoelemento sobre o campo impedirá que os eventos da roda do mouse o alcancem.

A desvantagem é que os botões giratórios para cima / para baixo não funcionam mais, mas você disse que os removeu mesmo assim.

Em teoria, pode-se restaurar o menu de contexto sem exigir que a entrada seja focada primeiro: os :hoverestilos não devem ser disparados quando o usuário rola, uma vez que os navegadores evitam recalculá-los durante a rolagem por motivos de desempenho, mas não cruzei totalmente o navegador / dispositivo testei.

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

A solução mais fácil é adicionar onWheel={ event => event.currentTarget.blur() }}a própria entrada.