Frage Scrollen auf `` deaktivieren


Ist es möglich, das Scrollrad zu deaktivieren, indem Sie die Nummer in einem Eingabefeld ändern? Ich habe mich mit webkit-spezifischem CSS beschäftigt, um den Spinner zu entfernen, aber ich möchte dieses Verhalten ganz loswerden. Ich mag es zu benutzen type=number seit es eine nette Tastatur auf iOS bringt.


75
2018-03-15 00:17


Ursprung


Antworten:


Verhindern Sie das Standardverhalten des Mausrad-Ereignisses bei Eingabe-Zahlenelementen, wie von anderen vorgeschlagen (das Aufrufen von "blur ()" wäre normalerweise nicht die bevorzugte Vorgehensweise, denn das wäre nicht das, was der Benutzer möchte).

ABER. Ich würde vermeiden, ständig auf das Mausrad-Ereignis auf allen Eingabe-Nummer-Elementen zu hören, und mache es nur, wenn das Element im Fokus ist (das ist, wenn das Problem existiert). Andernfalls Der Benutzer kann die Seite nicht scrollen wenn sich der Mauszeiger irgendwo über einem Eingabezahlelement befindet.

Lösung für 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')
})

(Delegieren Sie Fokusereignisse an das umgebende Formularelement - um zu viele Ereignis-Listener zu vermeiden, die schlecht für die Leistung sind.)


62
2017-12-30 11:23



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

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

Beispiele für jQuery und eine browserübergreifende Lösung finden Sie in verwandten Fragen:

HTML5-Ereignis-Listener für das Scrollen mit Zahleneingabe - Nur Chrome


15
2018-02-11 11:03



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

13
2017-11-19 18:06



@Semyon Perepelitsa

Dafür gibt es eine bessere Lösung. Verwischen entfernt den Fokus von der Eingabe und das ist ein Seiteneffekt, den Sie nicht möchten. Sie sollten stattdessen evt.preventDefault verwenden. Dies verhindert das Standardverhalten der Eingabe, wenn der Benutzer scrollt. Hier ist der Code:

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

12
2017-09-20 12:27



Ein Ereignis-Listener, um alle zu steuern

Dies ist ähnlich der Antwort von @Semyon Perepelitsa in reinem js, aber etwas einfacher, da es einen Ereignis-Listener auf das Dokumentelement setzt und überprüft, ob das fokussierte Element eine Zahleneingabe ist:

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

Wenn Sie das Wert-Scroll-Verhalten deaktivieren möchten einige Felder, aber nicht andere tun Sie das stattdessen:

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

mit diesem:

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

Wenn eine Eingabe die Noscroll-Klasse hat, wird sie beim Scrollen nicht geändert, ansonsten bleibt alles gleich.


12
2017-07-26 11:45



Zuerst müssen Sie das Mausrad-Ereignis anhalten, indem Sie entweder:

  1. Deaktiviere es mit mousewheel.disableScroll
  2. Abfangen mit e.preventDefault();
  3. Indem Sie den Fokus vom Element entfernen el.blur();

Die beiden ersten Ansätze verhindern, dass das Fenster scrollt und der letzte entfernt den Fokus vom Element. beide sind unerwünschte Ergebnisse.

Eine Problemumgehung ist zu verwenden el.blur() und refokussiere das Element nach einer Verzögerung:

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

5
2018-06-25 19:49



Die bereitgestellten Antworten funktionieren nicht in Firefox (Quantum). Der Ereignis-Listener muss vom Mausrad zum Rad geändert werden:

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

Dieser Code funktioniert bei Firefox Quantum und Chrome.


1
2018-04-03 07:55



Sie können einfach den HTML-Code verwenden auf dem Rad Attribut.

Diese Option hat keine Auswirkungen auf das Scrollen über andere Elemente der Seite.

Und fügen Sie einen Listener für alle Eingaben hinzu, die nicht in dynamisch nach dorsal erstellten Eingaben arbeiten.

Außerdem können Sie die Eingabepfeile mit CSS entfernen.

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()" />


1
2018-06-28 06:40