Prevent typing non-numeric in input type number

Question

Using  lt input type number gt  will cause this value inside of an event listener to return an empty string if the input is not a valid number   You can see an example of this at http   jsfiddle net fSy53   However  the invalid characters are still displayed in the input   Is there any way to get the value that is actually displayed  including the invalid characters  from within an event listener   My ultimate goal is to prevent users from actually typing any non-numeric characters into the field   I need to use type number so that the numeric virtual keyboard is used by mobile devices   My goal would be to do something like this value   this value replace    0-9   g      on keyup keypress  but this doesn t work because if an invalid character is typed  reading from this value returns

User · Answer

inputs 5  addEventListener  keydown   enterNumbers    function enterNumbers event      if   event code     ArrowLeft       event code     ArrowRight            event code     ArrowUp       event code     ArrowDown             event code     Delete       event code     Backspace           return      else if  event key search   d      -1        event preventDefault            in this case  the value of the input field stays intact when a non-number button is pressed  and still delete  backspace  arrowup-down-left-right work properly and can be used for modifying the digital input

User · Answer

You can accomplish this by preventing the keyPress event from occurring for non-numeric values  e g  using jQuery       input-selector   on  keypress   function e     return e metaKey       cmd ctrl     e which  lt   0       arrow keys     e which    8       delete key       0-9   test String fromCharCode e which       numbers      This accounts for all different types of input  e g  input from the number pad has different codes than the keyboard  as well as backspace  arrow keys  control cmd   r to reload etc

User · Answer

The other answers seemed more complicated than necessary so I adapted their answers to this short and sweet function   function allowOnlyNumbers event      if  event key length     1  amp  amp    D  test event key         event preventDefault            It won t do change the behavior of any arrow  enter  shift  ctrl or tab keys because the length of the key property for those events is longer than a single character   It also uses a simple regular expressions to look for any non digit character

User · Answer

I just had the same problem and discovered an alternative solution using the validation API - works without black magic in all major browsers  Chrome  Firefox  Safari  except IE  This solution simply prevents users from entering invalid values  I also included a fallback for IE  which is not nice but works at least   Context  onInput function is called on input events  setInputValue is used to set the value of the input element  previousInputValue contains the last valid input value  updated in setInputValue calls        function onInput  event            const inputValue   event target value              badInput supported on validation api  except IE             in IE it will be undefined  so we need strict value check         const badInput   event target validity badInput              simply prevent modifying the value         if  badInput     true               it s still possible to enter invalid values in an empty input  so we ll need this trick to prevent that             if  previousInputValue                           setInputValue                       setTimeout      gt                        setInputValue                         1                             return                     if  badInput     false                setInputValue inputValue               return                        fallback case for IE and other abominations             remove everything from the string expect numbers  point and comma            replace comma with points  parseFloat works only with points          let stringVal   String inputValue               replace     0-9     g                   replace    g                    remove all but first point         const pointIndex   stringVal indexOf               if  pointIndex     -1                const pointAndBefore   stringVal substring 0  pointIndex   1               const afterPoint   stringVal substring pointIndex   1                   removing all points after the first             stringVal      pointAndBefore   afterPoint replace     g                            const float   parseFloat stringVal           if  isNaN float                    fallback to emptying the input if anything goes south             setInputValue                  return                    setInputValue stringVal

User · Answer

I will add MetaKey as well  as I am using MacOS  input addEventListener  keypress    e    gt        const key   e key      if    e metaKey    e ctrlKey   amp  amp  key length     1  amp  amp     d    test key             e preventDefault              Or  you can try  isNaN parseFloat key

User · Answer

Based on Nrzonline s answer  I fixed the problem of the multiple     at the end of the input by adding a   let lastCharacterEntered   outside of the input and then onKeyPress  e   gt              var allowedChars    0123456789              function contains stringValue  charValue                return stringValue indexOf charValue   gt  -1                        var invalidKey                e key length     1  amp  amp   contains allowedChars  e key                   e key          amp  amp  contains e target value                   console log e target value             invalidKey  amp  amp  e preventDefault              if   invalidKey                if  lastCharacterEntered          amp  amp  e key                          e preventDefault                  else                 lastCharacterEntered   e key

User · Answer

Please note that e which  e keyCode and e charCode are deprecated  https   developer mozilla org en-US docs Web API KeyboardEvent which  I prefer e key   document querySelector  input   addEventListener  keypress   function  e        var allowedChars    0123456789        function contains stringValue  charValue            return stringValue indexOf charValue   gt  -1            var invalidKey   e key length     1  amp  amp   contains allowedChars  e key                 e key          amp  amp  contains e target value            invalidKey  amp  amp  e preventDefault         This function doesn t interfere with control codes in Firefox  Backspace  Tab  etc  by checking the string length  e key length     1   It also prevents duplicate dots at the beginning and between the digits  e key          amp  amp  contains e target value        Unfortunately  it doesn t prevent multiple dots at the end  234      It seems there is no way to cope with it

User · Answer

This solution seems to be working well for me  It builds on  pavok s solution by preserving ctrl key commands    document querySelector  input   addEventListener  keypress   function  e      if       e key length     1  amp  amp  e key          amp  amp  isNaN e key   amp  amp   e ctrlKey         e key          amp  amp  e target value toString   indexOf       gt  -1           e preventDefault

User · Answer

Update on the accepted answer   Because of many properties becoming deprecated       property  KeyboardEvent which  number  deprecated   you should just rely on the key property and create the rest of the logic by yourself   The code allows Enter  Backspace and all numbers  0-9   every other character is disallowed   document querySelector  input   addEventListener  keypress    e    gt      if  isNaN parseInt e key  10    amp  amp  e key      Backspace   amp  amp  e key      Enter           e preventDefault                NOTE This will disable paste action

User · Answer

Try preventing the default behaviour if you don t like the incoming key value   document querySelector  input   addEventListener  keypress   function  evt        if  evt which  lt  48    evt which  gt  57                evt preventDefault

User · Answer

Try it   document querySelector  input   addEventListener  keyup   function         this value   this value replace   D

[javascript] Prevent typing non-numeric in input type number

Examples related to javascript

Examples related to html