Disable scrolling on input type number

Question

Is it possible to disable the scroll wheel changing the number in an input number field  I ve messed with webkit-specific CSS to remove the spinner but I d like to get rid of this behavior altogether  I like using type number since it brings up a nice keyboard on iOS

User · Answer

For anyone working with React and looking for solution  I   ve found out that easiest way is to use onWheelCapture prop in Input component like this   onWheelCapture  e   gt      e target blur

User · Answer

If you want a solution that doesn   t need JavaScript  combining some HTML functionality with a CSS pseudo-element does the trick    x000D   x000D  span   x000D    position  relative  x000D    display  inline-block     Fit around contents    x000D    x000D   x000D  span  after   x000D    content      x000D    position  absolute  x000D    top  0  right  0  bottom  0  left  0     Stretch over containing block    x000D    cursor  text     restore I-beam cursor    x000D    x000D   x000D     Restore context menu while editing    x000D  input focus   x000D    position  relative  x000D    z-index  1  x000D    x000D   lt label gt How many javascripts can u fit in u mouth  x000D     lt span gt  lt input type  number  min  0  max  99  value  1  gt  lt  span gt  x000D   lt  label gt  x000D   x000D   x000D    This works because clicking on the contents of a  lt label gt  that   s associated with a form field will focus the field  However  the    windowpane    of the pseudo-element over the field will block mousewheel events from reaching it   The drawback is that the up down spinner buttons no longer work  but you said you had removed those anyway     In theory  one could restore the context menu without requiring the input to be focused first   hover styles shouldn   t fire when the user scrolls  since browsers avoid recalculating them during scrolling for performance reasons  but I haven   t thoroughly cross-browser device tested it

User · Answer

I have an alternative suggestion  The problem I see with most of the common recommendation of firing a blur event is that it has unexpected side-effects  It s not always a good thing to remove a focus state unexpectedly  Why not this instead   lt input type  quot number quot  onwheel  quot return false  quot    gt  It s very simple and straight-forward  easy to implement  and no side-effects that I can think of

User · Answer

Most answers blur the number element even if the cursor isn t hovering over it  the below does not document addEventListener  quot wheel quot   function event      if  document activeElement type      quot number quot   amp  amp      document elementFromPoint event x  event y     document activeElement        document activeElement blur             https   jsfiddle net s06puv3j 1

User · Answer

Typescript Variation Typescript needs to know that you re working with an HTMLElement for type safety  else you ll see lots of Property  type  does not exist on type  Element  type of errors  document addEventListener  quot mousewheel quot   function event     let numberInput     lt HTMLInputElement gt document activeElement     if  numberInput type      quot number quot         numberInput blur

User · Answer

While trying to solve this for myself  I noticed that it s actually possible to retain the scrolling of the page and focus of the input while disabling number changes by attempting to re-fire the caught event on the parent element of the  lt input type  number   gt  on which it was caught  simply like this   e target parentElement dispatchEvent e     However  this causes an error in browser console  and is probably not guaranteed to work everywhere  I only tested on Firefox   since it is intentionally invalid code   Another solution which works nicely at least on Firefox and Chromium is to temporarily make the  lt input gt  element readOnly  like this   function handleScroll e      if  e target tagName toLowerCase        input       amp  amp   e target type      number        amp  amp   e target     document activeElement       amp  amp   e target readOnly             e target readOnly   true        setTimeout function el   el readOnly   false     0  e target         document addEventListener  wheel   function e   handleScroll e         One side effect that I ve noticed is that it may cause the field to flicker for a split-second if you have different styling for readOnly fields  but for my case at least  this doesn t seem to be an issue   Similarly   as explained in James  answer  instead of modifying the readOnly property  you can blur   the field and then focus   it back  but again  depending on styles in use  some flickering might occur   Alternatively  as mentioned in other comments here  you can just call preventDefault   on the event instead  Assuming that you only handle wheel events on number inputs which are in focus and under the mouse cursor  that s what the three conditions above signify   negative impact on user experience would be close to none

User · Answer

First you must stop the mousewheel event by either    Disabling it with mousewheel disableScroll Intercepting it with e preventDefault    By removing focus from the element el blur      The first two approaches both stop the window from scrolling and the last removes focus from the element  both of which are undesirable outcomes   One workaround is to use el blur   and refocus the element after a delay      input type number    on  mousewheel   function      var el     this     el blur      setTimeout function        el focus         10

User · Answer

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

User · Answer

One event listener to rule them all  This is similar to  Simon Perepelitsa s answer in pure js  but a bit simpler  as it puts one event listener on the document element and checks if the focused element is a number input   document addEventListener  wheel   function event       if document activeElement type      number            document activeElement blur                If you want to turn off the value scrolling behaviour on some fields  but not others just do this instead   document addEventListener  wheel   function event       if document activeElement type      number   amp  amp         document activeElement classList contains  noscroll                  document activeElement blur                with this    lt input type  number  class  noscroll   gt    If an input has the noscroll class it wont change on scroll  otherwise everything stays the same   Test here with JSFiddle

User · Answer

document  on  wheel    input type number    function  e          this  blur

User · Answer

The provided answers do not work in Firefox  Quantum   The event listener needs to be changed from mousewheel to wheel       input type number    on  wheel  function e     this  blur          This code works on Firefox Quantum and Chrome

User · Answer

You can simply use the HTML onwheel attribute   This option have no effects on scrolling over other elements of the page   And add a listener for all inputs don t work in inputs dynamically created posteriorly   Aditionaly  you can remove the input arrows with CSS    x000D   x000D  input type  number    -webkit-outer-spin-button   x000D  input type  number    -webkit-inner-spin-button   x000D      -webkit-appearance  none  x000D      margin  0  x000D    x000D  input type  number     x000D      -moz-appearance  textfield  x000D    x000D   lt input type  number  onwheel  this blur      gt  x000D   x000D   x000D

User · Answer

Prevent the default behavior of the mousewheel event on input-number elements like suggested by others  calling  blur    would normally not be the preferred way to do it  because that wouldn t be  what the user wants    BUT  I would avoid listening for the mousewheel event on all input-number elements all the time and only do it  when the element is in focus  that s when the problem exists   Otherwise the user cannot scroll the page when the mouse pointer is anywhere over a input-number element    Solution for 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         Delegate focus events to the surrounding form element - to avoid to many event listeners  which are bad for performance

User · Answer

Easiest solution is to add onWheel   event   gt  event currentTarget blur      on input itself

User · Answer

Semyon Perepelitsa  There is a better solution for this  Blur removes the focus from the input and that is a side affect that you do not want  You should use evt preventDefault instead  This prevents the default behavior of the input when the user scrolls  Here is the code   input   document getElementById  the number input   input addEventListener  mousewheel   function evt   evt preventDefault

User · Answer

input   document getElementById  the number input   input addEventListener  mousewheel   function event   this blur        http   jsfiddle net bQbDm 2   For jQuery example and a cross-browser solution see related question   HTML5 event listener for number input scroll - Chrome only

[javascript] Disable scrolling on `<input type=number>`

Examples related to javascript

Examples related to css

Examples related to html

Examples related to forms