Disabilita lo scorrimento su "<input type = number>"

È possibile disabilitare la rotella di scorrimento modificando il numero in un campo del numero di input? Ho pasticciato con CSS specifici per il webkit per rimuovere lo spinner, ma mi piacerebbe sbarazzarmi del tutto di questo comportamento. Mi piace usare type=numberpoiché fa apparire una bella tastiera su iOS.

Impedisce il comportamento predefinito dell'evento rotellina del mouse sugli elementi del numero di input come suggerito da altri (chiamare "blur ()" normalmente non sarebbe il modo preferito per farlo, perché non sarebbe quello che vuole l'utente).

MA. Eviterei sempre di ascoltare l'evento della rotellina del mouse su tutti gli elementi del numero di input e lo farei solo quando l'elemento è a fuoco (è allora che esiste il problema). In caso contrario, l'utente non potrà scorrere la pagina quando il puntatore del mouse si trova ovunque su un elemento del numero di input.

Soluzione per 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')
})

(Delegare gli eventi di focus all'elemento del form circostante, per evitare a molti listener di eventi, che sono negativi per le prestazioni.)

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

Un ascoltatore di eventi per dominarli tutti

Questo è simile a @Simon Perepelitsa 's risposta a js puri, ma un po' più semplice, in quanto mette un ascoltatore evento l'elemento del documento e controlla se l'elemento focalizzato è immettere un numero:

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

Se vuoi disattivare il comportamento di scorrimento dei valori su alcuni campi, ma non su altri, fallo semplicemente:

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

con questo:

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

Se un input ha la classe noscroll non cambierà durante lo scroll, altrimenti tutto rimane lo stesso.

Prova qui con JSFiddle

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

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

Per l'esempio di jQuery e una soluzione cross-browser vedere la domanda correlata:

Listener di eventi HTML5 per lo scorrimento dell'input di numeri - solo Chrome

Puoi semplicemente usare l'HTML sulla rotella attributo .

Questa opzione non ha effetto sullo scorrimento su altri elementi della pagina.

E aggiungi un ascoltatore per tutti gli input non funzionano negli input creati dinamicamente a posteriori.

Aditionaly, puoi rimuovere le frecce di input 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

C'è una soluzione migliore per questo. La sfocatura rimuove il focus dall'input e questo è un effetto collaterale che non si desidera. Dovresti invece usare evt.preventDefault. Ciò impedisce il comportamento predefinito dell'input quando l'utente scorre. Ecco il codice:

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

Per prima cosa devi interrompere l'evento della rotellina del mouse in uno dei seguenti modi:

1. Disabilitandolo con mousewheel.disableScroll
2. Intercettandolo con e.preventDefault();
3. Rimuovendo il focus dall'elemento el.blur();

I primi due approcci bloccano entrambi lo scorrimento della finestra e l'ultimo rimuove il focus dall'elemento; entrambi sono risultati indesiderabili.

Una soluzione alternativa consiste nell'utilizzare el.blur()e rimettere a fuoco l'elemento dopo un ritardo:

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

Le risposte fornite non funzionano in Firefox (Quantum). Il listener di eventi deve essere cambiato dalla rotellina del mouse alla rotellina:

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

Questo codice funziona su Firefox Quantum e Chrome.

Per chiunque lavori con React e cerchi una soluzione. Ho scoperto che il modo più semplice è usare l'elica onWheelCapture nel componente Input in questo modo:

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

Variazione del dattiloscritto

Il dattiloscritto deve sapere che stai lavorando con un HTMLElement per l'indipendenza dai tipi, altrimenti vedrai molti Property 'type' does not exist on type 'Element'tipi di errori.

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

Mentre cercavo di risolverlo da solo, ho notato che in realtà è possibile mantenere lo scorrimento della pagina e il focus dell'input disabilitando le modifiche del numero tentando di riattivare l'evento catturato sull'elemento genitore del <input type="number"/>su cui era stato catturato , semplicemente così:

e.target.parentElement.dispatchEvent(e);

Tuttavia, questo causa un errore nella console del browser e probabilmente non è garantito che funzioni ovunque (ho provato solo su Firefox), poiché si tratta di codice intenzionalmente non valido.

Un'altra soluzione che funziona bene almeno su Firefox e Chromium è quella di creare temporaneamente l' <input>elemento readOnly, in questo modo:

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 effetto collaterale che ho notato è che può causare uno sfarfallio del campo per una frazione di secondo se hai uno stile diverso per readOnly campi, ma almeno per il mio caso, questo non sembra essere un problema.

Allo stesso modo, (come spiegato nella risposta di James) invece di modificare la readOnlyproprietà, puoi blur()il campo e poifocus() nuovo, ma ancora una volta, a seconda degli stili in uso, potrebbe verificarsi uno sfarfallio.

In alternativa, come menzionato in altri commenti qui, puoi semplicemente chiamare preventDefault()l'evento. Supponendo che gestisci solo wheeleventi sugli input numerici che sono a fuoco e sotto il cursore del mouse (questo è ciò che significano le tre condizioni sopra), l'impatto negativo sull'esperienza utente sarebbe quasi nullo.

Se desideri una soluzione che non necessita di JavaScript, combinare alcune funzionalità HTML con uno pseudo-elemento CSS fa il trucco:

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>

Funziona perché facendo clic sul contenuto di un file <label> che è associato a un campo modulo si focalizzerà il campo. Tuttavia, la "finestra" dello pseudo-elemento sul campo bloccherà gli eventi della rotella del mouse dal raggiungerlo.

Lo svantaggio è che i pulsanti di selezione su / giù non funzionano più, ma hai detto di averli rimossi comunque.

In teoria, si potrebbe ripristinare il menu contestuale senza richiedere prima che l'input sia focalizzato: gli :hoverstili non dovrebbero attivarsi quando l'utente scorre, poiché i browser evitano di ricalcolarli durante lo scorrimento per motivi di prestazioni, ma non ho completamente cross-browser / dispositivo testato.

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 soluzione più semplice è aggiungere onWheel={ event => event.currentTarget.blur() }}l'input stesso.