Wyłącz przewijanie na `<input type = number>`

Czy można wyłączyć kółko przewijania, zmieniając liczbę w polu wejściowym? Bawiłem się CSS specyficznym dla webkit, aby usunąć spinner, ale chciałbym całkowicie pozbyć się tego zachowania. Lubię używać, type=numberponieważ wyświetla ładną klawiaturę na iOS.

Zapobiegaj domyślnemu zachowaniu zdarzenia mousewheel na elementach wejściowych, takich jak sugerowane przez innych (wywołanie "blur ()" normalnie nie byłoby preferowanym sposobem, aby to zrobić, ponieważ nie byłoby to tym, czego chce użytkownik).

ALE. Unikałbym nasłuchiwania zdarzenia mousewheel na wszystkich elementach input-number przez cały czas i robiłbym to tylko wtedy, gdy element jest w centrum uwagi (wtedy istnieje problem). W przeciwnym razie użytkownik nie może przewijać strony, gdy wskaźnik myszy znajduje się w dowolnym miejscu nad elementem wejściowym.

Rozwiązanie dla 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')
})

(Deleguj zdarzenia fokusu do otaczającego elementu formularza - aby uniknąć wielu detektorów zdarzeń, które są niekorzystne dla wydajności).

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

Jeden odbiornik wydarzeń, który rządzi wszystkimi

Jest to podobne do @Simon Perepelitsa „s odpowiedzi w czystym js, ale nieco prostsze, ponieważ stawia jeden detektor zdarzeń na elemencie dokumentu i sprawdza, czy element skupiony jest wejście numer:

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

Jeśli chcesz wyłączyć przewijanie wartości w niektórych polach, ale nie w innych, po prostu zrób to:

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

z tym:

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

Jeśli wejście ma klasę noscroll, nie zmieni się przy przewijaniu, w przeciwnym razie wszystko pozostanie takie samo.

Przetestuj tutaj z JSFiddle

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

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

Aby zapoznać się z przykładem jQuery i rozwiązaniem dla różnych przeglądarek, zobacz powiązane pytanie:

Odbiornik zdarzeń HTML5 do przewijania wprowadzania liczb - tylko Chrome

Możesz po prostu użyć atrybutu HTML onwheel .

Ta opcja nie ma wpływu na przewijanie innych elementów strony.

I dodaj detektor dla wszystkich wejść, które nie działają w danych wejściowych utworzonych dynamicznie później.

Dodatkowo możesz usunąć strzałki wejściowe za pomocą 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

Jest na to lepsze rozwiązanie. Rozmycie usuwa fokus z wejścia i jest to efekt uboczny, którego nie chcesz. Zamiast tego należy użyć evt.preventDefault. Zapobiega to domyślnemu zachowaniu danych wejściowych podczas przewijania przez użytkownika. Oto kod:

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

Najpierw musisz zatrzymać zdarzenie kółka myszy przez:

1. Wyłączanie go za pomocą mousewheel.disableScroll
2. Przechwytywanie go z e.preventDefault();
3. Usuwając fokus z elementu el.blur();

Pierwsze dwa podejścia zatrzymują przewijanie okna, a ostatnie usuwa fokus z elementu; z których oba są niepożądanymi skutkami.

Jednym z obejść jest użycie el.blur()i ponowne ustawienie elementu po opóźnieniu:

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

Podane odpowiedzi nie działają w przeglądarce Firefox (Quantum). Odbiornik zdarzeń należy zmienić z kółka myszy na kółko:

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

Ten kod działa na Firefox Quantum i Chrome.

Dla każdego, kto pracuje z Reactem i szuka rozwiązania. Odkryłem, że najłatwiejszym sposobem jest użycie właściwości onWheelCapture w komponencie Input w następujący sposób:

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

Odmiana maszynopisu

Maszynopis musi wiedzieć, że pracujesz z elementem HTMLElement dla bezpieczeństwa typów, w przeciwnym razie zobaczysz wiele Property 'type' does not exist on type 'Element'rodzajów błędów.

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

Próbując rozwiązać ten problem samodzielnie, zauważyłem, że w rzeczywistości można zachować przewijanie strony i fokus danych wejściowych, wyłączając zmiany liczbowe, próbując ponownie uruchomić przechwycone zdarzenie na elemencie nadrzędnym, <input type="number"/>na którym zostało przechwycone , po prostu w ten sposób:

e.target.parentElement.dispatchEvent(e);

Jednak powoduje to błąd w konsoli przeglądarki i prawdopodobnie nie ma gwarancji, że będzie działać wszędzie (testowałem tylko w przeglądarce Firefox), ponieważ jest to celowo nieprawidłowy kod.

Innym rozwiązaniem, które działa ładnie przynajmniej na Firefoksie i Chromium, jest tymczasowe utworzenie <input>elementu w readOnlyten sposób:

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

Jednym z efektów ubocznych, który zauważyłem, jest to, że może powodować migotanie pola na ułamek sekundy, jeśli masz inny styl readOnlypól, ale przynajmniej w moim przypadku nie wydaje się to stanowić problemu.

Podobnie (jak wyjaśniono w odpowiedzi Jamesa) zamiast modyfikować readOnlywłaściwość, można blur()pole, a następnie focus()przywrócić, ale znowu, w zależności od używanych stylów, może wystąpić migotanie.

Alternatywnie, jak wspomniano w innych komentarzach, możesz po prostu zadzwonić preventDefault()na wydarzenie. Zakładając, że obsługujesz wheelzdarzenia tylko na danych wejściowych liczbowych, które są w centrum uwagi i pod kursorem myszy (to właśnie oznaczają trzy powyższe warunki), negatywny wpływ na wrażenia użytkownika byłby bliski zeru.

Jeśli potrzebujesz rozwiązania, które nie wymaga JavaScript, połączenie niektórych funkcji HTML z pseudoelementem CSS załatwia sprawę:

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>

To działa, ponieważ kliknięcie zawartości <label>powiązanej z polem formularza spowoduje zaznaczenie pola. Jednak „okienko” pseudoelementu nad polem będzie blokować dotarcie do niego zdarzeń kółka myszy.

Wadą jest to, że przyciski pokrętła góra / dół już nie działają, ale powiedziałeś, że i tak je usunąłeś.

Teoretycznie można przywrócić menu kontekstowe bez konieczności uprzedniego skupienia się na danych wejściowych: :hoverstyle nie powinny uruchamiać się, gdy użytkownik przewija, ponieważ przeglądarki unikają ich ponownego obliczania podczas przewijania ze względu na wydajność, ale nie dokładnie między przeglądarkami / urządzeniami przetestowałem to.

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

Najłatwiejszym rozwiązaniem jest dodanie onWheel={ event => event.currentTarget.blur() }}samego wejścia.