Désactiver le défilement sur `<input type = number>`

Est-il possible de désactiver la molette de défilement en modifiant le numéro dans un champ de saisie numérique? J'ai manipulé le CSS spécifique au webkit pour supprimer le spinner, mais j'aimerais complètement me débarrasser de ce comportement. J'aime utiliser type=numbercar cela fait apparaître un joli clavier sur iOS.

Empêchez le comportement par défaut de l'événement mousewheel sur les éléments de nombre d'entrée comme suggéré par d'autres (appeler "blur ()" ne serait normalement pas la meilleure façon de le faire, car ce ne serait pas ce que l'utilisateur veut).

MAIS. J'éviterais d'écouter l'événement mousewheel sur tous les éléments de nombre d'entrée tout le temps et de ne le faire que lorsque l'élément est au point (c'est là que le problème existe). Sinon, l'utilisateur ne peut pas faire défiler la page lorsque le pointeur de la souris se trouve n'importe où sur un élément de nombre d'entrée.

Solution pour 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')
})

(Déléguez les événements de focus à l'élément de formulaire environnant - pour éviter de nombreux écouteurs d'événements, ce qui nuit aux performances.)

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

Un écouteur d'événements pour les gouverner tous

Ceci est similaire à @Simon Perepelitsa de réponse dans js pure, mais un peu plus simple, car il met un écouteur d'événement sur l'élément de document et vérifie si l'élément ciblé est une entrée de numéro:

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

Si vous souhaitez désactiver le comportement de défilement des valeurs sur certains champs, mais pas sur d'autres, procédez comme suit:

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

avec ça:

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

Si une entrée a la classe noscroll, elle ne changera pas lors du défilement, sinon tout reste le même.

Testez ici avec JSFiddle

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

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

Pour un exemple jQuery et une solution multi-navigateurs, voir la question associée:

Écouteur d'événements HTML5 pour le défilement de la saisie numérique - Chrome uniquement

Vous pouvez simplement utiliser l' attribut HTML onwheel .

Cette option n'a aucun effet sur le défilement des autres éléments de la page.

Et ajouter un écouteur pour toutes les entrées ne fonctionne pas dans les entrées créées dynamiquement en arrière.

De plus, vous pouvez supprimer les flèches d'entrée avec 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

Il existe une meilleure solution pour cela. Le flou supprime le focus de l'entrée et c'est un effet secondaire que vous ne voulez pas. Vous devez utiliser evt.preventDefault à la place. Cela empêche le comportement par défaut de l'entrée lorsque l'utilisateur fait défiler. Voici le code:

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

Vous devez d'abord arrêter l'événement de la molette de la souris en:

1. Désactiver avec mousewheel.disableScroll
2. L'intercepter avec e.preventDefault();
3. En supprimant le focus de l'élément el.blur();

Les deux premières approches arrêtent à la fois le défilement de la fenêtre et la dernière supprime le focus de l'élément; qui sont tous deux des résultats indésirables.

Une solution de contournement consiste à utiliser el.blur()et à recentrer l'élément après un délai:

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

Pour tous ceux qui travaillent avec React et recherchent une solution. J'ai découvert que le moyen le plus simple est d'utiliser le prop onWheelCapture dans un composant d'entrée comme celui-ci:

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

Les réponses fournies ne fonctionnent pas dans Firefox (Quantum). L'écouteur d'événement doit être changé de la molette de la souris à la roue:

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

Ce code fonctionne sur Firefox Quantum et Chrome.

Variation typographique

Typescript doit savoir que vous travaillez avec un HTMLElement pour la sécurité des types, sinon vous verrez beaucoup de Property 'type' does not exist on type 'Element'types d'erreurs.

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

En essayant de résoudre cela par moi-même, j'ai remarqué qu'il était en fait possible de conserver le défilement de la page et le focus de l'entrée tout en désactivant les changements de nombre en tentant de relancer l'événement capturé sur l'élément parent de l'élément <input type="number"/>sur lequel il a été capturé , simplement comme ceci:

e.target.parentElement.dispatchEvent(e);

Cependant, cela provoque une erreur dans la console du navigateur, et il n'est probablement pas garanti de fonctionner partout (je n'ai testé que sur Firefox), car il s'agit d'un code intentionnellement invalide.

Une autre solution qui fonctionne bien au moins sur Firefox et Chromium est de créer temporairement l' <input>élément readOnly, comme ceci:

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 effet secondaire que j'ai remarqué est que cela peut faire scintiller le champ pendant une fraction de seconde si vous avez un style différent pour les readOnlychamps, mais pour mon cas au moins, cela ne semble pas être un problème.

De même, (comme expliqué dans la réponse de James) au lieu de modifier la readOnlypropriété, vous pouvez blur()le champ, puis focus()le retourner, mais encore une fois, selon les styles utilisés, un scintillement peut se produire.

Alternativement, comme mentionné dans d'autres commentaires ici, vous pouvez simplement appeler preventDefault()l'événement à la place. En supposant que vous gérez uniquement les wheelévénements sur les entrées numériques qui sont au point et sous le curseur de la souris (c'est ce que signifient les trois conditions ci-dessus), l'impact négatif sur l'expérience utilisateur serait proche de zéro.

Si vous voulez une solution qui n'a pas besoin de JavaScript, combiner des fonctionnalités HTML avec un pseudo-élément CSS fait l'affaire:

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>

Cela fonctionne parce que cliquer sur le contenu d'un <label>qui est associé à un champ de formulaire focalisera le champ. Cependant, le «volet de la fenêtre» du pseudo-élément au-dessus du champ empêchera les événements de la molette de la souris de l'atteindre.

L'inconvénient est que les boutons fléchés haut / bas ne fonctionnent plus, mais vous avez dit que vous les aviez quand même supprimés.

En théorie, on pourrait restaurer le menu contextuel sans exiger que l'entrée soit focalisée en premier: les :hoverstyles ne devraient pas se déclencher lorsque l'utilisateur fait défiler, car les navigateurs évitent de les recalculer pendant le défilement pour des raisons de performances, mais je n'ai pas complètement cross-browser / device testé.

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 solution la plus simple consiste à ajouter l' onWheel={ event => event.currentTarget.blur() }}entrée elle-même.