Deaktivieren Sie das Scrollen auf `<input type = number>`

Ist es möglich, das Scrollrad zu deaktivieren, indem die Nummer in einem eingegebenen Nummernfeld geändert wird? Ich habe mit Webkit-spezifischem CSS herumgespielt, um den Spinner zu entfernen, aber ich möchte dieses Verhalten insgesamt beseitigen. Ich benutze type=numberes gerne, da es eine schöne Tastatur unter iOS aufruft.

Verhindern Sie das Standardverhalten des Mausrad-Ereignisses bei Elementen mit Eingabenummer, wie von anderen vorgeschlagen (der Aufruf von "blur ()" ist normalerweise nicht die bevorzugte Methode, da dies nicht den Wünschen des Benutzers entspricht).

ABER. Ich würde es vermeiden, ständig auf alle Elemente der Eingabenummer auf das Mausrad-Ereignis zu warten, und dies nur tun, wenn das Element im Fokus steht (dann besteht das Problem). Andernfalls kann der Benutzer nicht durch die Seite scrollen, wenn sich der Mauszeiger irgendwo über einem Element mit einer eingegebenen Nummer 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('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

(Delegieren Sie Fokusereignisse an das umgebende Formularelement, um zu vermeiden, dass viele Ereignis-Listener die Leistung beeinträchtigen.)

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

Ein Ereignis-Listener, der sie alle regiert

Dies ist ähnlich wie @ Simon Perepelitsa ‚s Antwort in reinen js, aber ein bisschen einfacher, als es ein Ereignis - Listener auf dem Dokumentelement und prüft , setzt , wenn das fokussierte Element eine Nummer eingegeben wird:

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

Wenn Sie das Wert-Bildlauf-Verhalten für einige Felder deaktivieren möchten, für andere jedoch nicht, tun Sie stattdessen Folgendes:

document.addEventListener("wheel", 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, ändert sie sich beim Scrollen nicht, andernfalls bleibt alles beim Alten.

Testen Sie hier mit JSFiddle

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

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

Ein jQuery-Beispiel und eine browserübergreifende Lösung finden Sie in der zugehörigen Frage:

HTML5-Ereignis-Listener für die Eingabe von Zahlen - nur Chrome

Sie können einfach das HTML- Onwheel- Attribut verwenden.

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 bei dynamisch nachträglich erstellten Eingaben nicht funktionieren.

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

@ Semyon Perepelitsa

Dafür gibt es eine bessere Lösung. Unschärfe entfernt den Fokus von der Eingabe und das ist ein Nebeneffekt, den Sie nicht wollen. Sie sollten stattdessen evt.preventDefault verwenden. Dies verhindert das Standardverhalten der Eingabe beim Scrollen des Benutzers. Hier ist der Code:

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

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

1. Deaktivieren mit mousewheel.disableScroll
2. Abfangen mit e.preventDefault();
3. Durch Entfernen des Fokus vom Element el.blur();

Die ersten beiden Ansätze verhindern das Scrollen des Fensters und der letzte entfernt den Fokus vom Element. Beides sind unerwünschte Ergebnisse.

Eine Problemumgehung besteht darin el.blur(), das Element nach einer Verzögerung zu verwenden und neu zu fokussieren:

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

Die angegebenen Antworten funktionieren in Firefox (Quantum) nicht. Der Ereignis-Listener muss vom Mausrad zum Rad gewechselt werden:

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

Dieser Code funktioniert unter Firefox Quantum und Chrome.

Für alle, die mit React arbeiten und nach einer Lösung suchen. Ich habe herausgefunden, dass der einfachste Weg darin besteht, die onWheelCapture-Requisite in der Eingabekomponente wie folgt zu verwenden:

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

Typoskript-Variation

Typescript muss wissen, dass Sie aus Gründen der Typensicherheit mit einem HTMLElement arbeiten. Andernfalls werden viele Property 'type' does not exist on type 'Element'Arten von Fehlern angezeigt .

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

Beim Versuch, dies für mich selbst zu lösen, habe ich festgestellt, dass es tatsächlich möglich ist, das Scrollen der Seite und den Fokus der Eingabe beizubehalten, während Nummernänderungen deaktiviert werden, indem versucht wird, das abgefangene Ereignis auf dem übergeordneten Element des abgefangenen Elements <input type="number"/>erneut auszulösen einfach so:

e.target.parentElement.dispatchEvent(e);

Dies führt jedoch zu einem Fehler in der Browserkonsole und funktioniert wahrscheinlich nicht überall (ich habe nur auf Firefox getestet), da es sich absichtlich um ungültigen Code handelt.

Eine andere Lösung, die zumindest unter Firefox und Chrom gut funktioniert, besteht darin, das <input>Element vorübergehend readOnlywie folgt zu erstellen :

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

Ein Nebeneffekt, den ich bemerkt habe, ist, dass das Feld möglicherweise für den Bruchteil einer Sekunde flackert, wenn Sie ein anderes Styling für readOnlyFelder haben, aber zumindest für meinen Fall scheint dies kein Problem zu sein.

In ähnlicher Weise können Sie (wie in James 'Antwort erläutert), anstatt die readOnlyEigenschaft zu ändern , blur()das Feld und dann focus()wieder zurück, aber abhängig von den verwendeten Stilen kann es erneut zu Flackern kommen.

Alternativ können Sie, wie in anderen Kommentaren hier erwähnt, preventDefault()stattdessen einfach die Veranstaltung aufrufen . Angenommen, Sie behandeln wheelEreignisse nur an Zahleneingaben, die im Fokus und unter dem Mauszeiger stehen (das bedeuten die drei oben genannten Bedingungen), dann wären die negativen Auswirkungen auf die Benutzererfahrung nahezu gleich Null.

Wenn Sie eine Lösung suchen, die kein JavaScript benötigt, reicht die Kombination einiger HTML-Funktionen mit einem CSS-Pseudoelement aus:

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>

Dies funktioniert, weil durch Klicken auf den Inhalt <label>eines Felds, das einem Formularfeld zugeordnet ist, das Feld fokussiert wird. Die „Fensterscheibe“ des Pseudoelements über dem Feld verhindert jedoch, dass Mausradereignisse es erreichen.

Der Nachteil ist, dass die Auf- / Ab-Drehknöpfe nicht mehr funktionieren, aber Sie sagten, Sie hätten diese trotzdem entfernt.

Theoretisch könnte man das Kontextmenü wiederherstellen, ohne dass die Eingabe zuerst fokussiert werden muss: :hoverStile sollten nicht ausgelöst werden, wenn der Benutzer einen Bildlauf durchführt, da Browser es aus Leistungsgründen vermeiden, sie während des Bildlaufs neu zu berechnen, aber ich habe Browser / Gerät nicht gründlich übergreifend habe es getestet.

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

Die einfachste Lösung besteht darin, die onWheel={ event => event.currentTarget.blur() }}Eingabe selbst hinzuzufügen .