HTML text input allow only numeric input

Question

Is there a quick way to set an HTML text input   lt input type text   gt   to only allow numeric keystrokes  plus

User · Answer

x000D   x000D  var userName   document querySelector   numberField     userName addEventListener  input   restrictNumber   function restrictNumber  e        var newValue   this value replace new RegExp     d    ig           this value   newValue    x000D   lt input type  text  id  numberField  gt  x000D   x000D   x000D

User · Answer

Just an other variant with jQuery using                       numeric   keypress function         return    d  test String fromCharCode event which

User · Answer

I couldn t find a clear answer  that doesn t loop over the whole string every time  so here  document querySelectorAll  quot input quot   forEach input   gt      input addEventListener  quot input quot   e   gt        if  isNaN Number input value input value length-1     amp  amp  input value input value length-1                  input value   input value slice 0  -1                   No regex  this goes over the last character every time you type and slices it if it s not a number or period

User · Answer

Most answers here all have the weakness of using key- events    Many of the answers would limit your ability to do text selection with keyboard macros  copy paste and more unwanted behavior  others seem to depend on specific jQuery plugins  which is killing flies with machineguns    This simple solution seems to work best for me cross platform  regardless of input mechanism  keystroke  copy paste  rightclick copy paste  speech-to-text etc    All text selection keyboard macros would still work  and it would even limit ones ability to set a non-numeric value by script   function forceNumeric        var  input     this        input val  input val   replace     d   g            body   on  propertychange input    input type  number     forceNumeric

User · Answer

You may try using the    onkeydown    event and cancel the event  event preventDefault or something like that  when it s not one of the allowed keys

User · Answer

I ve searched long and hard for a good answer to this  and we desperately need  lt input type  number   but short of that  these 2 are the most concise ways I could come up with    lt input type  text          onkeyup  this value this value replace     d        gt    If you dislike the non-accepted character showing for a split-second before being erased  the method below is my solution   Note the numerous additional conditions  this is to avoid disabling all sorts of navigation and hotkeys   If anyone knows how to compactify this  let us know    lt input type  text   onkeydown  return   event ctrlKey    event altKey                          47 lt event keyCode  amp  amp  event keyCode lt 58  amp  amp  event shiftKey  false                           95 lt event keyCode  amp  amp  event keyCode lt 106                          event keyCode  8      event keyCode  9                           event keyCode gt 34  amp  amp  event keyCode lt 40                           event keyCode  46     gt

User · Answer

A short and sweet implementation using jQuery and replace   instead of looking at event keyCode or event which      input numeric   live  keyup   function e        this  val   this  val   replace    0-9  g              Only small side effect that the typed letter appears momentarily and CTRL CMD   A seems to behave a bit strange

User · Answer

The best way  allow ALL type of numbers - real negative  real positive  iinteger negative  integer positive  is     input  keypress function  evt       var theEvent   evt    window event      var key   theEvent keyCode    theEvent which      key   String fromCharCode  key        var regex     - d         dowolna liczba   -            var objRegex     -  d       d         var val     evt target  val        if  regex test key      objRegex test val key                   theEvent keyCode    46     theEvent keyCode    8            theEvent returnValue   false          if theEvent preventDefault  theEvent preventDefault

User · Answer

just use type  number  now this attribute supporting in most of the browsers   lt input type  number  maxlength  3  ng-bind  first  gt

User · Answer

Use this DOM   lt input type  text  onkeypress  validate event     gt    And this script  function validate evt      var theEvent   evt    window event        Handle paste   if  theEvent type      paste           key   event clipboardData getData  text plain        else        Handle key press       var key   theEvent keyCode    theEvent which        key   String fromCharCode key         var regex     0-9         if   regex test key          theEvent returnValue   false      if theEvent preventDefault  theEvent preventDefault

User · Answer

A safer approach is checking the value of the input  instead of hijacking keypresses and trying to filter keyCodes   This way the user is free to use keyboard arrows  modifier keys  backspace  delete  use non standard keyboars  use mouse to paste  use drag and drop text  even use accessibility inputs   The below script allows positive and negative numbers  1 10 100 0 100 01 -1 -1 0 -10 00 1 0 0   not allowed    x000D   x000D  var input   document getElementById  number    x000D  input onkeyup   input onchange   enforceFloat  x000D   x000D    enforce that only a float can be inputed x000D  function enforceFloat     x000D    var valid      -  d    d     -   d      x000D    var number     - d    d   -  d     d      d     d     x000D    if   valid test this value     x000D      var n   this value match number   x000D      this value   n   n 0        x000D      x000D    x000D   lt input id  number  value  -3 1415  placeholder  Type a number  autofocus gt  x000D   x000D   x000D    EDIT  I removed my old answer because I think it is antiquated now

User · Answer

Note  This is an updated answer  Comments below refer to an old version which messed around with keycodes   JavaScript  Try it yourself on JSFiddle   You can filter the input values of a text  lt input gt  with the following setInputFilter function  supports Copy Paste  Drag Drop  keyboard shortcuts  context menu operations  non-typeable keys  the caret position  different keyboard layouts  and all browsers since IE 9       Restricts input for the given textbox to the given inputFilter function  function setInputFilter textbox  inputFilter        input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event        textbox addEventListener event  function           if  inputFilter this value             this oldValue   this value          this oldSelectionStart   this selectionStart          this oldSelectionEnd   this selectionEnd          else if  this hasOwnProperty  oldValue              this value   this oldValue          this setSelectionRange this oldSelectionStart  this oldSelectionEnd           else           this value                                 You can now use the setInputFilter function to install an input filter   setInputFilter document getElementById  myTextBox    function value      return    d     d    test value      Allow digits and     only  using a RegExp       See the JSFiddle demo for more input filter examples  Also note that you still must do server side validation   TypeScript  Here is a TypeScript version of this   function setInputFilter textbox  Element  inputFilter   value  string    gt  boolean   void         input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event            textbox addEventListener event  function this   HTMLInputElement   HTMLTextAreaElement   amp   oldValue  string  oldSelectionStart  number   null  oldSelectionEnd  number   null                 if  inputFilter this value                     this oldValue   this value                  this oldSelectionStart   this selectionStart                  this oldSelectionEnd   this selectionEnd                else if  Object prototype hasOwnProperty call this   oldValue                      this value   this oldValue                  if  this oldSelectionStart     null  amp  amp                      this oldSelectionEnd     null                        this setSelectionRange this oldSelectionStart  this oldSelectionEnd                                   else                   this value                                             jQuery  There is also a jQuery version of this  See this answer   HTML 5  HTML 5 has a native solution with  lt input type  number  gt   see the specification   but note that browser support varies    Most browsers will only validate the input when submitting the form  and not when typing  Most mobile browsers don t support the step  min and max attributes  Chrome  version 71 0 3578 98  still allows the user to enter the characters e and E into the field  Also see this question  Firefox  version 64 0  and Edge  EdgeHTML version 17 17134  still allow the user to enter any text into the field    Try it yourself on w3schools com

User · Answer

this also work for persian and arabic number      setNumericInput  function  event              var key   window event   event keyCode   event which           if  event keyCode     8             key  gt   48  amp  amp  key  lt   57              key  gt   1776  amp  amp  key  lt   1785                 return true             else               event preventDefault

User · Answer

You can attach to the key down event and then filter keys according to what you need  for example    lt input id  FIELD ID  name  FIELD ID  onkeypress  return validateNUM event this     type  text  gt    And the actual JavaScript handler would be   function validateNUM e field        var key   getKeyEvent e      if  specialKey key   return true      if   key  gt   48  amp  amp  key  lt   57      key    46            if  key    46              return true          else              if  field value search          -1  amp  amp  field value length  gt  0                  return true              else                 return false                   function getKeyEvent e       var keynum     var keychar     var numcheck     if window event     IE         keynum   e keyCode     else if e which     Netscape Firefox Opera         keynum   e which     return keynum

User · Answer

A easy way to resolve this problem is implementing a jQuery function to validate with regex the charaters typed in the textbox for example   Your html code    lt input class  integerInput  type  text  gt    And the js function using jQuery    function             integerInput   on  input   function           this value   this value          replace     d  g         numbers and decimals only                 x000D   x000D    function     x000D              integerInput   on  input   function     x000D            this value   this value x000D               replace     d  g         numbers and decimals only x000D               x000D              x000D          x000D   lt script x000D       src  https   code jquery com jquery-2 2 4 min js  x000D       integrity  sha256-BbhdlvQf xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44   x000D       crossorigin  anonymous  gt  x000D   lt  script gt  x000D   x000D   lt input type  text  class  integerInput   gt  x000D   x000D   x000D     x000D   x000D   x000D

User · Answer

I finished using this function  onkeypress  quot if event which  lt  48    event which  gt  57   if event which    8  return false  quot   This works well in IE and Chrome  I don  t know why it  s not work well in firefox too  this function block the tab key in Firefox  For the tab key works fine in firefox add this  onkeypress  quot if event which  lt  48    event which  gt  57   if event which    8  if event keyCode    9  return false  quot

User · Answer

lt input type  quot tel quot             onkeypress  quot return onlyNumberKey event  quot  gt   in script tag function onlyNumberKey evt                     Only ASCII charactar in that range allowed        var ASCIICode    evt which    evt which   evt keyCode        if  ASCIICode  gt  31  amp  amp   ASCIICode  lt  48    ASCIICode  gt  57              return false         return true

User · Answer

HTML5 has  lt input type number   which sounds right for you  Currently  only Opera supports it natively  but there is a project that has a JavaScript implementation

User · Answer

Thanks guys this really help me   I found the perfert one really useful for database   function numonly root       var reet   root value          var arr1 reet length            var ruut   reet charAt arr1-1              if  reet length  gt  0              var regex     0-9                      if   ruut match regex                   var reet   reet slice 0  -1                    root  val reet                                        Then add the eventhandler   onkeyup  numonly this

User · Answer

2 solutions   Use a form validator  for example with jQuery validation plugin   Do a check during the onblur  i e  when the user leaves the field  event of the input field  with the regular expression    lt script type  text javascript  gt  function testField field        var regExpr   new RegExp    d     d          if   regExpr test field value              Case of error       field value                 lt  script gt    lt input type  text      onblur  testField this     gt

User · Answer

Yes  HTML5 does  Try this code  w3school     lt  DOCTYPE html gt   lt html gt   lt body gt    lt form action    gt    Quantity  between 1 and 5    lt input type  number  name  quantity  min  1  max  5    gt     lt input type  submit    gt   lt  form gt    lt  body gt   lt  html gt

User · Answer

Use this DOM    lt input type    text  onkeydown    validate event    gt    And this script   validate   function evt        if   8  46  37  39  48  49  50  51  52  53  54  55  56  57  35  36  indexOf evt keyCode    evt which     -1                evt returnValue   false          if evt preventDefault  evt preventDefault                  OR this script  without indexOf  using two for s     validate   function evt        var CharValidate   new Array  08    046    039    948    235        var number pressed   false      for  i   0  i  lt  5  i                  for  Ncount   0  Ncount  lt  parseInt CharValidate i  substring 0  1     1  Ncount                          if   evt keyCode    evt which     parseInt CharValidate i  substring 1  CharValidate i  lenght     Ncount                                number pressed   true                                    if  number pressed    false                evt returnValue   false          if evt preventDefault  evt preventDefault               I used the onkeydown attribute instead of onkeypress  because the onkeydown attribute is checked before onkeypress attribute  The problem would be in the Google Chrome browser   With the attribute  onkeypress   TAB would be uncontrollable with  preventDefault  on google chrome  however  with the attribute  onkeydown   TAB becomes controllable   ASCII Code for TAB    9  The first script have less code than the second  however  the array of ASCII characters must have all the keys   The second script is much bigger than the first  but the array does not need all keys  The first digit in each position of the array is the number of times each position will be read  For each reading  will be incremented 1 to the next one  For example       NCount   0  48   NCount   48  NCount      48   NCount   49  NCount           48   NCount   57      In the case of numerical keys are only 10  0 - 9   but if they were 1 million it would not make sense to create an array with all these keys   ASCII codes    8      Backspace   46     Delete   37     left arrow   39     right arrow   48 - 57     numbers   36     home   35     end

User · Answer

A safer approach is checking the value of the input  instead of hijacking keypresses and trying to filter keyCodes   This way the user is free to use keyboard arrows  modifier keys  backspace  delete  use non standard keyboars  use mouse to paste  use drag and drop text  even use accessibility inputs   The below script allows positive and negative numbers  1 10 100 0 100 01 -1 -1 0 -10 00 1 0 0   not allowed    x000D   x000D  var input   document getElementById  number    x000D  input onkeyup   input onchange   enforceFloat  x000D   x000D    enforce that only a float can be inputed x000D  function enforceFloat     x000D    var valid      -  d    d     -   d      x000D    var number     - d    d   -  d     d      d     d     x000D    if   valid test this value     x000D      var n   this value match number   x000D      this value   n   n 0        x000D      x000D    x000D   lt input id  number  value  -3 1415  placeholder  Type a number  autofocus gt  x000D   x000D   x000D    EDIT  I removed my old answer because I think it is antiquated now

User · Answer

input type  number  is an HTML5 attribute   In the other case this will help you   function isNumberKey evt       var charCode    evt which    evt which   evt keyCode     if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false      return true      lt input type  number  name  somecode  onkeypress  return isNumberKey event    gt

User · Answer

I use the jquery inputmask js library you can download from NuGet  More specifically I use jquery inputmask regex extensions js that comes with it   I give the input element a class  in this case reg    lt input type  number  id  WorkSrqNo  name  WorkSrqNo  maxlength  6  class  reg   gt    And then in JavaScript I set the mask   var regexDigitsOnly      0-9         input reg   inputmask  Regex     regex  regexDigitsOnly       This is for digits only  but you can alter the regular expression to accept       By using this it is impossible to enter characters that are not digits  It is useful to have these inputmask libraries for general formatting

User · Answer

If you are trying on angular this might help  To get the input as number  with a decimal point  then   lt input   ngModel    data  oninput  this value   this value replace    0-9   g      replace           g    1     gt    Now this will not update the value in model correctly  to explicitly change the value of model too add this   lt input   ngModel    data  oninput  this value   this value replace    0-9   g      replace           g    1      change   data    event target value  gt    The change event will fire after the value in the model has been updated so it can be used with reactive forms as well

User · Answer

This is an improved function   function validateNumber evt      var theEvent   evt    window event    var key   theEvent keyCode    theEvent which    if   key  lt  48    key  gt  57   amp  amp    key    8    key    9    key    13    key    37    key    39    key    46         theEvent returnValue   false      if  theEvent preventDefault  theEvent preventDefault

User · Answer

lt input name  amount  type  text  value  Only number in here   gt     lt script gt         input name amount    keyup function              this  val   this  val   replace     d                  lt  script gt

User · Answer

I couldn t find a clear answer  that doesn t loop over the whole string every time  so here  document querySelectorAll  quot input quot   forEach input   gt      input addEventListener  quot input quot   e   gt        if  isNaN Number input value input value length-1     amp  amp  input value input value length-1                  input value   input value slice 0  -1                   No regex  this goes over the last character every time you type and slices it if it s not a number or period

User · Answer

If you are okay with using plugins  here is one I tested  It works well except for paste   Numeric Input  Here is a Demo http   jsfiddle net 152sumxu 2  Code below  Lib pasted in-line    lt div id  plugInDemo  class  vMarginLarge  gt       lt h4 gt Demo of the plug-in     lt  h4 gt       lt div id  demoFields  class  marginSmall  gt           lt div class  vMarginSmall  gt               lt div gt Any Number lt  div gt               lt div gt                   lt input type  text  id  anyNumber    gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    lt script type  text javascript  gt            Author  Joshua De Leon - File  numericInput js - Description  Allows only numeric input in an element  - If you happen upon this code  enjoy it  learn from it  and if possible please credit me  www transtatic com      function b            var c     allowFloat  false  allowNegative  false           b fn numericInput   function e                var f   b extend     c  e               var d   f allowFloat              var g   f allowNegative              this keypress function j                    var i   j which                  var h   b this  val                    if  i gt 0  amp  amp   i lt 48    i gt 57                         if  d    true  amp  amp  i    46                            if  g    true  amp  amp  a this     0  amp  amp  h charAt 0      -                                 return false                                                   if  h match                                       return false                                                                     else                           if  g    true  amp  amp  i    45                                if  h charAt 0      -                                     return false                                                           if  a this     0                                    return false                                                                                 else                               if  i    8                                    return true                                                           else                                   return false                                                                                                                 else                       if  i gt 0  amp  amp   i  gt   48  amp  amp  i  lt   57                             if  g    true  amp  amp  h charAt 0      -   amp  amp  a this     0                                return false                                                                                               return this                    function a d                if  d selectionStart                    return d selectionStart                           else                   if  document selection                        d focus                        var f   document selection createRange                        if  f    null                            return 0                                           var e   d createTextRange    g   e duplicate                        e moveToBookmark f getBookmark                         g setEndPoint  EndToStart   e                       return g text length                                             return 0                 jQuery           function                anyNumber   numericInput   allowFloat  true  allowNegative  true              lt  script gt

User · Answer

I was looking for a way to block an input of numbers  then  as I did not find it in answers  this code worked fine for me   I just need to input it in the onkeypress event   If you need just to block an input of numbers  I believe this will work fine      onkeypress  if event which  amp lt  48    event which  amp gt  57   if event which    8  if e keyCode    9  return false

User · Answer

I opted to use a combination of the two answers mentioned here i e    lt input type  number    gt   and   function isNumberKey evt       var charCode    evt which    evt which   evt keyCode     return   charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57         lt input type  text  onkeypress  return isNumberKey event    gt

User · Answer

2 solutions   Use a form validator  for example with jQuery validation plugin   Do a check during the onblur  i e  when the user leaves the field  event of the input field  with the regular expression    lt script type  text javascript  gt  function testField field        var regExpr   new RegExp    d     d          if   regExpr test field value              Case of error       field value                 lt  script gt    lt input type  text      onblur  testField this     gt

User · Answer

I use the jquery inputmask js library you can download from NuGet  More specifically I use jquery inputmask regex extensions js that comes with it   I give the input element a class  in this case reg    lt input type  number  id  WorkSrqNo  name  WorkSrqNo  maxlength  6  class  reg   gt    And then in JavaScript I set the mask   var regexDigitsOnly      0-9         input reg   inputmask  Regex     regex  regexDigitsOnly       This is for digits only  but you can alter the regular expression to accept       By using this it is impossible to enter characters that are not digits  It is useful to have these inputmask libraries for general formatting

User · Answer

Hope I am not beating a dead horse with an ugly stick here  but I am using this for my website quantity input  it allows only numbers from 1 to 99   Try it   https   jsfiddle net 83va5sb9          lt input min  1  type  text  id  quantity  name  quantity  value  1        onKeyUp  numbersonly    gt          lt script gt      function numbersonly           var str   document getElementById  quantity   value       var newstr            for  i   0  i  lt  str length  i              for  ii   1  ii  lt  10  ii                if  str charAt i  indexOf ii   gt  -1                newstr    str charAt i                                      if  newstr                  newstr   1               if  parseInt newstr   gt  99            newstr   99               document getElementById  quantity   value   newstr             lt  script gt

User · Answer

A short and sweet implementation using jQuery and replace   instead of looking at event keyCode or event which      input numeric   live  keyup   function e        this  val   this  val   replace    0-9  g              Only small side effect that the typed letter appears momentarily and CTRL CMD   A seems to behave a bit strange

User · Answer

Code bellow will also check for PASTE event  Uncomment  ruleSetArr 4  and add concate  to  ruleSetArr  to allow FLOAT numbers  Easy copy paste function  Call it with your input element in parameter  Example  inputIntTypeOnly    input name  inputName        x000D   x000D  function inputIntTypeOnly elm   x000D      elm on  keydown  function event   x000D          var e   event    window event  x000D              key   e keyCode    e which  x000D              ruleSetArr 1    8 9 46      backspace tab delete x000D              ruleSetArr 2    48 49 50 51 52 53 54 55 56 57      top keyboard num keys x000D              ruleSetArr 3    96 97 98 99 100 101 102 103 104 105      side keyboard num keys x000D              ruleSetArr 4    17 67 86      Ctrl  amp  V x000D              ruleSetArr 5    110 189 190   add this to ruleSetArr to allow float values x000D              ruleSetArr   ruleSetArr 1 concat ruleSetArr 2 ruleSetArr 3 ruleSetArr 4      merge arrays of keys x000D     x000D              if ruleSetArr indexOf        undefined       check if browser supports indexOf     IE8 and earlier x000D                  var retRes   ruleSetArr indexOf key   x000D                else    x000D                  var retRes     inArray key ruleSetArr   x000D                 x000D              if retRes    -1      if returned key not found in array  return false x000D                  return false  x000D                else if key    67    key    86      account for paste events x000D                  event stopPropagation    x000D                 x000D   x000D         on  paste  function event   x000D          var  thisObj     this   x000D              origVal    thisObj val       orig value x000D              newVal   event originalEvent clipboardData getData  Text       paste clipboard value x000D          if newVal replace   D  g                 if paste value is not a number  insert orig value and ret false x000D               thisObj val origVal   x000D              return false  x000D            else   x000D               thisObj val newVal replace   D  g        x000D              return false  x000D             x000D     x000D          x000D     x000D   x000D  var inptElm      input name  inputName      x000D   x000D  inputIntTypeOnly inptElm   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt input type  text  name  inputName  value  1  gt  x000D   x000D   x000D

User · Answer

If you are trying on angular this might help  To get the input as number  with a decimal point  then   lt input   ngModel    data  oninput  this value   this value replace    0-9   g      replace           g    1     gt    Now this will not update the value in model correctly  to explicitly change the value of model too add this   lt input   ngModel    data  oninput  this value   this value replace    0-9   g      replace           g    1      change   data    event target value  gt    The change event will fire after the value in the model has been updated so it can be used with reactive forms as well

User · Answer

You can replace the Shurok function with       numeric   keypress function         return    0123456789     test String fromCharCode Event which

User · Answer

I opted to use a combination of the two answers mentioned here i e    lt input type  number    gt   and   function isNumberKey evt       var charCode    evt which    evt which   evt keyCode     return   charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57         lt input type  text  onkeypress  return isNumberKey event    gt

User · Answer

Call this function when ready to validate what ever  I used a textbox here  In my HTML    lt input type  button  value  Check IT   onclick  check document getElementById  inputboxToValidate   value      gt    In my JavaScript code   function check num       var onlynumbers   true     for  var i   0  i  lt   num length - 1   i              if  num substr i  1      0     num substr i  1      1     num substr i  1      2     num substr i  1      3     num substr i  1      4     num substr i  1      5     num substr i  1      6     num substr i  1      7     num substr i  1      8     num substr i  1      9                 alert  please make sure that only numbers have been entered in the Quantaty box                onlynumbers   false                     if  onlynumbers    true               Execute Code

User · Answer

HTML5 has  lt input type number   which sounds right for you  Currently  only Opera supports it natively  but there is a project that has a JavaScript implementation

User · Answer

And one more example  which works great for me    function validateNumber event        var key   window event   event keyCode   event which      if  event keyCode     8    event keyCode     46            return true        else if   key  lt  48    key  gt  57             return false        else           return true             Also attach to keypress event    document  ready function            id  edit    keypress validateNumber         And HTML    lt input type  input  id  edit1  value  0  size  5  maxlength  5    gt    Here is a jsFiddle example

User · Answer

You can also compare input value  which is treated as string by default  to itself forced as numeric  like    if event target value    event target value   1           returns true if input value is numeric string     However  you need to bind that to event like keyup etc

User · Answer

JavaScript code   function validate evt        if evt keyCode  8                var theEvent   evt    window event          var key   theEvent keyCode    theEvent which          key   String fromCharCode key           var regex     0-9               if   regex test key                         theEvent returnValue   false               if  theEvent preventDefault                  theEvent preventDefault                                    HTML code    lt input type  text  name  price  value  0  onkeypress  validate event    gt    works perfectly because the backspace keycode is 8 and a regex expression doesn t let it  so it s an easy way to bypass the bug

User · Answer

Just an other variant with jQuery using                       numeric   keypress function         return    d  test String fromCharCode event which

User · Answer

Note  This is an updated answer  Comments below refer to an old version which messed around with keycodes   JavaScript  Try it yourself on JSFiddle   You can filter the input values of a text  lt input gt  with the following setInputFilter function  supports Copy Paste  Drag Drop  keyboard shortcuts  context menu operations  non-typeable keys  the caret position  different keyboard layouts  and all browsers since IE 9       Restricts input for the given textbox to the given inputFilter function  function setInputFilter textbox  inputFilter        input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event        textbox addEventListener event  function           if  inputFilter this value             this oldValue   this value          this oldSelectionStart   this selectionStart          this oldSelectionEnd   this selectionEnd          else if  this hasOwnProperty  oldValue              this value   this oldValue          this setSelectionRange this oldSelectionStart  this oldSelectionEnd           else           this value                                 You can now use the setInputFilter function to install an input filter   setInputFilter document getElementById  myTextBox    function value      return    d     d    test value      Allow digits and     only  using a RegExp       See the JSFiddle demo for more input filter examples  Also note that you still must do server side validation   TypeScript  Here is a TypeScript version of this   function setInputFilter textbox  Element  inputFilter   value  string    gt  boolean   void         input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event            textbox addEventListener event  function this   HTMLInputElement   HTMLTextAreaElement   amp   oldValue  string  oldSelectionStart  number   null  oldSelectionEnd  number   null                 if  inputFilter this value                     this oldValue   this value                  this oldSelectionStart   this selectionStart                  this oldSelectionEnd   this selectionEnd                else if  Object prototype hasOwnProperty call this   oldValue                      this value   this oldValue                  if  this oldSelectionStart     null  amp  amp                      this oldSelectionEnd     null                        this setSelectionRange this oldSelectionStart  this oldSelectionEnd                                   else                   this value                                             jQuery  There is also a jQuery version of this  See this answer   HTML 5  HTML 5 has a native solution with  lt input type  number  gt   see the specification   but note that browser support varies    Most browsers will only validate the input when submitting the form  and not when typing  Most mobile browsers don t support the step  min and max attributes  Chrome  version 71 0 3578 98  still allows the user to enter the characters e and E into the field  Also see this question  Firefox  version 64 0  and Edge  EdgeHTML version 17 17134  still allow the user to enter any text into the field    Try it yourself on w3schools com

User · Answer

2 solutions   Use a form validator  for example with jQuery validation plugin   Do a check during the onblur  i e  when the user leaves the field  event of the input field  with the regular expression    lt script type  text javascript  gt  function testField field        var regExpr   new RegExp    d     d          if   regExpr test field value              Case of error       field value                 lt  script gt    lt input type  text      onblur  testField this     gt

User · Answer

HTML5 has  lt input type number   which sounds right for you  Currently  only Opera supports it natively  but there is a project that has a JavaScript implementation

User · Answer

input type  number  is an HTML5 attribute   In the other case this will help you   function isNumberKey evt       var charCode    evt which    evt which   evt keyCode     if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false      return true      lt input type  number  name  somecode  onkeypress  return isNumberKey event    gt

User · Answer

JavaScript code   function validate evt        if evt keyCode  8                var theEvent   evt    window event          var key   theEvent keyCode    theEvent which          key   String fromCharCode key           var regex     0-9               if   regex test key                         theEvent returnValue   false               if  theEvent preventDefault                  theEvent preventDefault                                    HTML code    lt input type  text  name  price  value  0  onkeypress  validate event    gt    works perfectly because the backspace keycode is 8 and a regex expression doesn t let it  so it s an easy way to bypass the bug

User · Answer

One more example where you can add only numbers in the input field  can not letters   lt input type  text  class  form-control  id  phone  name  phone  placeholder  PHONE  spellcheck  false  oninput  this value   this value replace    0-9   g      replace           g    1     gt

User · Answer

2 solutions   Use a form validator  for example with jQuery validation plugin   Do a check during the onblur  i e  when the user leaves the field  event of the input field  with the regular expression    lt script type  text javascript  gt  function testField field        var regExpr   new RegExp    d     d          if   regExpr test field value              Case of error       field value                 lt  script gt    lt input type  text      onblur  testField this     gt

User · Answer

You can attach to the key down event and then filter keys according to what you need  for example    lt input id  FIELD ID  name  FIELD ID  onkeypress  return validateNUM event this     type  text  gt    And the actual JavaScript handler would be   function validateNUM e field        var key   getKeyEvent e      if  specialKey key   return true      if   key  gt   48  amp  amp  key  lt   57      key    46            if  key    46              return true          else              if  field value search          -1  amp  amp  field value length  gt  0                  return true              else                 return false                   function getKeyEvent e       var keynum     var keychar     var numcheck     if window event     IE         keynum   e keyCode     else if e which     Netscape Firefox Opera         keynum   e which     return keynum

User · Answer

Remember the regional differences  Euros use periods and commas in the reverse way as Americans   plus the minus sign  or the convention of wrapping a number in parentheses to indicate negative   plus exponential notation  I m reaching on that one

User · Answer

If you want to suggest to the device  maybe a mobile phone  between alpha or numeric you can use  lt input type  number  gt

User · Answer

I might have another  simple  workaround for this     Since String fromCharCode key  returns weird things upon AZERTY keyboard  numerical keypad returns code as g for 1  and 1 for  amp  character     I ve realized catching the final value on keyup within the input to reset it to an arbitrary value is a simpler  lightweight  amp  bugproof method  could also be done via some regex     to keep decimals and so on     don t have to filter other Ctrl  Home  Del  and Enter events      Usage with jq     lt input class  pn  gt   lt script gt  function pn el  nb el value if isNaN nb     nb lt 1 el value 1   jQuery   pn   keyup function   pn this       lt  script gt    Onkeyup attribute    lt input onkeyup  positiveNumericInput this   gt   lt script gt function positiveNumericInput el  nb el value if isNaN nb     nb lt 1 el value 1   lt  script gt

User · Answer

If you want to suggest to the device  maybe a mobile phone  between alpha or numeric you can use  lt input type  number  gt

User · Answer

Call this function when ready to validate what ever  I used a textbox here  In my HTML    lt input type  button  value  Check IT   onclick  check document getElementById  inputboxToValidate   value      gt    In my JavaScript code   function check num       var onlynumbers   true     for  var i   0  i  lt   num length - 1   i              if  num substr i  1      0     num substr i  1      1     num substr i  1      2     num substr i  1      3     num substr i  1      4     num substr i  1      5     num substr i  1      6     num substr i  1      7     num substr i  1      8     num substr i  1      9                 alert  please make sure that only numbers have been entered in the Quantaty box                onlynumbers   false                     if  onlynumbers    true               Execute Code

User · Answer

For those of you that like one-liners   string replace     d    g      replace             replace      d 0 2           1      I use this code on an input type  text   and with AngularJS to activate on keypress  but you can use jQuery if like  Just put this code into a function that activates on a keypress some way   It only allows digits  digits   decimal  digits   decimal   digits   CODE  YourString replace     d    g      replace             replace      d 0 2           1     testOne    kjlsgjkl983724658 346 326 326  36 346    gt   983724658 34    testTwo         346   3246  364 3 64 2346          gt   346     testThree    slfdkjghsf      amp   amp     amp       KJHKJHKJKJH3    gt   3    testFour    622632463 23464236326324363    gt   622632463 23     This was built for US currency  but it can be changed to allow more than two decimals past first decimal place as in the following     CHANGED CODE  YourString replace     d    g      replace             replace      d           1     testFour    dfskj345346346 36424362jglkjsg         gt   345346346 36424362

User · Answer

You may try using the    onkeydown    event and cancel the event  event preventDefault or something like that  when it s not one of the allowed keys

User · Answer

This is the extended version of geowa4 s solution  Supports min and max attributes  If the number is out of range  the previous value will be shown   You can test it here   Usage   lt input type text class  number  maxlength 3 min 1 max 500 gt   function number e    var theEvent   e    window event  var key   theEvent keyCode    theEvent which  if key  13 amp  amp key  9    allow enter and tab   key   String fromCharCode  key      var regex     0-9         if   regex test key         theEvent returnValue   false      if theEvent preventDefault  theEvent preventDefault                      document  ready function           input type text    filter   number  NUMBER   on            focus  function e              e target  data  oldValue    e target  val                             keypress  function e                   e target oldvalue   e target value                  number e                           change  function e               var t   e target              var min     t  attr  min                var max     t  attr  max                var val   parseInt   t  val   10                         if  val lt min    max lt val                                        alert  Error                           t  val   t  data  oldValue                                                                If the inputs are dynamic use this     document  ready function           body   on  focus   input type text  number  NUMBER  function e             e target  data  oldValue    e target  val                     body   on  keypress   input type text  number  NUMBER  function e           e target oldvalue   e target value          number e                   body   on  change   input type text  number  NUMBER  function e           var t   e target         var min     t  attr  min            var max     t  attr  max            var val   parseInt   t  val                      if  val lt min    max lt val                                alert  Error                       t  val   t  data  oldValue

User · Answer

And one more example  which works great for me    function validateNumber event        var key   window event   event keyCode   event which      if  event keyCode     8    event keyCode     46            return true        else if   key  lt  48    key  gt  57             return false        else           return true             Also attach to keypress event    document  ready function            id  edit    keypress validateNumber         And HTML    lt input type  input  id  edit1  value  0  size  5  maxlength  5    gt    Here is a jsFiddle example

User · Answer

This is the easy solution  Replace  price-input input quantity with the class of your input feild      price-input input quantity   on  keypress keyup blur  function  event                 this  val   this  val   replace     d                    if   event which  lt  48    event which  gt  57                 event preventDefault

User · Answer

The best way  allow ALL type of numbers - real negative  real positive  iinteger negative  integer positive  is     input  keypress function  evt       var theEvent   evt    window event      var key   theEvent keyCode    theEvent which      key   String fromCharCode  key        var regex     - d         dowolna liczba   -            var objRegex     -  d       d         var val     evt target  val        if  regex test key      objRegex test val key                   theEvent keyCode    46     theEvent keyCode    8            theEvent returnValue   false          if theEvent preventDefault  theEvent preventDefault

User · Answer

If you are okay with using plugins  here is one I tested  It works well except for paste   Numeric Input  Here is a Demo http   jsfiddle net 152sumxu 2  Code below  Lib pasted in-line    lt div id  plugInDemo  class  vMarginLarge  gt       lt h4 gt Demo of the plug-in     lt  h4 gt       lt div id  demoFields  class  marginSmall  gt           lt div class  vMarginSmall  gt               lt div gt Any Number lt  div gt               lt div gt                   lt input type  text  id  anyNumber    gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    lt script type  text javascript  gt            Author  Joshua De Leon - File  numericInput js - Description  Allows only numeric input in an element  - If you happen upon this code  enjoy it  learn from it  and if possible please credit me  www transtatic com      function b            var c     allowFloat  false  allowNegative  false           b fn numericInput   function e                var f   b extend     c  e               var d   f allowFloat              var g   f allowNegative              this keypress function j                    var i   j which                  var h   b this  val                    if  i gt 0  amp  amp   i lt 48    i gt 57                         if  d    true  amp  amp  i    46                            if  g    true  amp  amp  a this     0  amp  amp  h charAt 0      -                                 return false                                                   if  h match                                       return false                                                                     else                           if  g    true  amp  amp  i    45                                if  h charAt 0      -                                     return false                                                           if  a this     0                                    return false                                                                                 else                               if  i    8                                    return true                                                           else                                   return false                                                                                                                 else                       if  i gt 0  amp  amp   i  gt   48  amp  amp  i  lt   57                             if  g    true  amp  amp  h charAt 0      -   amp  amp  a this     0                                return false                                                                                               return this                    function a d                if  d selectionStart                    return d selectionStart                           else                   if  document selection                        d focus                        var f   document selection createRange                        if  f    null                            return 0                                           var e   d createTextRange    g   e duplicate                        e moveToBookmark f getBookmark                         g setEndPoint  EndToStart   e                       return g text length                                             return 0                 jQuery           function                anyNumber   numericInput   allowFloat  true  allowNegative  true              lt  script gt

User · Answer

Use    lt script gt      function onlyNumber id            var DataVal   document getElementById id  value          document getElementById id  value   DataVal replace    0-9  g             lt  script gt   lt input type  text  id  1  name  1  onChange  onlyNumber this id    gt    And if you want to update a value after press key  you can change onChange for onKeypress  onKeyDown or onKeyup  But event onKeypress doesn t running in any browsers

User · Answer

Remember the regional differences  Euros use periods and commas in the reverse way as Americans   plus the minus sign  or the convention of wrapping a number in parentheses to indicate negative   plus exponential notation  I m reaching on that one

User · Answer

You can replace the Shurok function with       numeric   keypress function         return    0123456789     test String fromCharCode Event which

User · Answer

I ve searched long and hard for a good answer to this  and we desperately need  lt input type  number   but short of that  these 2 are the most concise ways I could come up with    lt input type  text          onkeyup  this value this value replace     d        gt    If you dislike the non-accepted character showing for a split-second before being erased  the method below is my solution   Note the numerous additional conditions  this is to avoid disabling all sorts of navigation and hotkeys   If anyone knows how to compactify this  let us know    lt input type  text   onkeydown  return   event ctrlKey    event altKey                          47 lt event keyCode  amp  amp  event keyCode lt 58  amp  amp  event shiftKey  false                           95 lt event keyCode  amp  amp  event keyCode lt 106                          event keyCode  8      event keyCode  9                           event keyCode gt 34  amp  amp  event keyCode lt 40                           event keyCode  46     gt

User · Answer

JavaScript  function validateNumber evt        var e   evt    window event      var key   e keyCode    e which       if   e shiftKey  amp  amp   e altKey  amp  amp   e ctrlKey  amp  amp         numbers        key  gt   48  amp  amp  key  lt   57           Numeric keypad     key  gt   96  amp  amp  key  lt   105           Backspace and Tab and Enter     key    8    key    9    key    13           Home and End     key    35    key    36           left and right arrows     key    37    key    39           Del and Ins     key    46    key    45               input is VALID           else              input is INVALID         e returnValue   false          if  e preventDefault  e preventDefault              additional you could add comma  period and minus    -         comma  period and minus    on keypad   key    190    key    188    key    109    key    110      HTML   lt input type  text  onkeydown  validateNumber event      gt

User · Answer

just use type  number  now this attribute supporting in most of the browsers   lt input type  number  maxlength  3  ng-bind  first  gt

User · Answer

JavaScript  function validateNumber evt        var e   evt    window event      var key   e keyCode    e which       if   e shiftKey  amp  amp   e altKey  amp  amp   e ctrlKey  amp  amp         numbers        key  gt   48  amp  amp  key  lt   57           Numeric keypad     key  gt   96  amp  amp  key  lt   105           Backspace and Tab and Enter     key    8    key    9    key    13           Home and End     key    35    key    36           left and right arrows     key    37    key    39           Del and Ins     key    46    key    45               input is VALID           else              input is INVALID         e returnValue   false          if  e preventDefault  e preventDefault              additional you could add comma  period and minus    -         comma  period and minus    on keypad   key    190    key    188    key    109    key    110      HTML   lt input type  text  onkeydown  validateNumber event      gt

User · Answer

Use this DOM    lt input type    text  onkeydown    validate event    gt    And this script   validate   function evt        if   8  46  37  39  48  49  50  51  52  53  54  55  56  57  35  36  indexOf evt keyCode    evt which     -1                evt returnValue   false          if evt preventDefault  evt preventDefault                  OR this script  without indexOf  using two for s     validate   function evt        var CharValidate   new Array  08    046    039    948    235        var number pressed   false      for  i   0  i  lt  5  i                  for  Ncount   0  Ncount  lt  parseInt CharValidate i  substring 0  1     1  Ncount                          if   evt keyCode    evt which     parseInt CharValidate i  substring 1  CharValidate i  lenght     Ncount                                number pressed   true                                    if  number pressed    false                evt returnValue   false          if evt preventDefault  evt preventDefault               I used the onkeydown attribute instead of onkeypress  because the onkeydown attribute is checked before onkeypress attribute  The problem would be in the Google Chrome browser   With the attribute  onkeypress   TAB would be uncontrollable with  preventDefault  on google chrome  however  with the attribute  onkeydown   TAB becomes controllable   ASCII Code for TAB    9  The first script have less code than the second  however  the array of ASCII characters must have all the keys   The second script is much bigger than the first  but the array does not need all keys  The first digit in each position of the array is the number of times each position will be read  For each reading  will be incremented 1 to the next one  For example       NCount   0  48   NCount   48  NCount      48   NCount   49  NCount           48   NCount   57      In the case of numerical keys are only 10  0 - 9   but if they were 1 million it would not make sense to create an array with all these keys   ASCII codes    8      Backspace   46     Delete   37     left arrow   39     right arrow   48 - 57     numbers   36     home   35     end

User · Answer

Thanks guys this really help me   I found the perfert one really useful for database   function numonly root       var reet   root value          var arr1 reet length            var ruut   reet charAt arr1-1              if  reet length  gt  0              var regex     0-9                      if   ruut match regex                   var reet   reet slice 0  -1                    root  val reet                                        Then add the eventhandler   onkeyup  numonly this

User · Answer

So simple         In a JavaScript function  can use HTML or PHP    function isNumberKey evt       var charCode    evt which    evt which   evt keyCode      if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false      return true      In your form input    lt input type text name form number size 20 maxlength 12 onkeypress  return isNumberKey event   gt    With input max   These above allows for a 12-digit number

User · Answer

I might have another  simple  workaround for this     Since String fromCharCode key  returns weird things upon AZERTY keyboard  numerical keypad returns code as g for 1  and 1 for  amp  character     I ve realized catching the final value on keyup within the input to reset it to an arbitrary value is a simpler  lightweight  amp  bugproof method  could also be done via some regex     to keep decimals and so on     don t have to filter other Ctrl  Home  Del  and Enter events      Usage with jq     lt input class  pn  gt   lt script gt  function pn el  nb el value if isNaN nb     nb lt 1 el value 1   jQuery   pn   keyup function   pn this       lt  script gt    Onkeyup attribute    lt input onkeyup  positiveNumericInput this   gt   lt script gt function positiveNumericInput el  nb el value if isNaN nb     nb lt 1 el value 1   lt  script gt

User · Answer

Another easy way with jQuery       Numeric   bind  keydown  function e       if  e which  lt  48    e which  gt  57          return false      return true       Now just set your each inputs class to Numeric  like    lt input type  text  id  inp2  name  inp2  class  Numeric    gt

User · Answer

function digitsOnly obj       obj value   obj value replace   D g           and in the element   lt input type  text  onkeyup  digitsOnly this      gt

User · Answer

Use    lt script gt      function onlyNumber id            var DataVal   document getElementById id  value          document getElementById id  value   DataVal replace    0-9  g             lt  script gt   lt input type  text  id  1  name  1  onChange  onlyNumber this id    gt    And if you want to update a value after press key  you can change onChange for onKeypress  onKeyDown or onKeyup  But event onKeypress doesn t running in any browsers

User · Answer

I saw some great answers however I like them as small and as simple as possible  so maybe someone will benefit from it  I would use javascript Number   and isNaN functionality like this   if isNaN Number str                Exception it is NOT a number   else             Do something you have a number     Hope this helps

User · Answer

For those of you that like one-liners   string replace     d    g      replace             replace      d 0 2           1      I use this code on an input type  text   and with AngularJS to activate on keypress  but you can use jQuery if like  Just put this code into a function that activates on a keypress some way   It only allows digits  digits   decimal  digits   decimal   digits   CODE  YourString replace     d    g      replace             replace      d 0 2           1     testOne    kjlsgjkl983724658 346 326 326  36 346    gt   983724658 34    testTwo         346   3246  364 3 64 2346          gt   346     testThree    slfdkjghsf      amp   amp     amp       KJHKJHKJKJH3    gt   3    testFour    622632463 23464236326324363    gt   622632463 23     This was built for US currency  but it can be changed to allow more than two decimals past first decimal place as in the following     CHANGED CODE  YourString replace     d    g      replace             replace      d           1     testFour    dfskj345346346 36424362jglkjsg         gt   345346346 36424362

User · Answer

This removes any bad character instantly  allows only one dot  is short  and allows backspace  etc        numberInput   keyup function          s   this  val        if      d     d    test s     this  val s substr 0 s length-1

User · Answer

Yes  HTML5 does  Try this code  w3school     lt  DOCTYPE html gt   lt html gt   lt body gt    lt form action    gt    Quantity  between 1 and 5    lt input type  number  name  quantity  min  1  max  5    gt     lt input type  submit    gt   lt  form gt    lt  body gt   lt  html gt

User · Answer

When it comes to fool-proofing UX  one should always try to keep a reference point for the  user s intelligence    While neglecting everything other than numbers  a dot and a hyphen would seem like the perfect choice  you should also consider letting them enter any content  and when they re done  purify the input  if not a valid number  show error  This method would make sure no matter what the user manages to do  the result will always be valid  If the user is naive enough not to understand the warnings and error messages  pressing a button and seeing that nothing happens  as in keycode comparison  will only confuse him her more   Also  for forms  validation and error message display are almost a necessity  So  the provisions might already be there  Here s the algorithm         On losing-focus or form-submission  do following       1 1  Read content from the input and apply parseFloat to result      1 2  If the result is a Non-accessible-Number  NaN   reset the input field and pop-up an error message   Please enter a valid number    eg  235 or -654 or 321 526 or -6352 646584        1 3  Else  if String result     content from input   change value of the field to result and show warning message   The value you   entered have been modified  Input must be a valid number  eg  235 or   -654 or 321 526 or -6352 646584   For a field that cannot allow any unconfirmed value  then this condition may be added to step 1 2       1 4  Else  do nothing       This method also gives you the added advantage of performing validations based on minimum value  maximum value  decimal places  etc if necessary  Just have to do these operations on the result after step 1 2   Disadvantages    The input will allow the user to enter any value until the focus is lost or the form is submitted  But if the instructions on filling the field were clear enough  in 90  of the cases this might not come up  If step 1 3 is used to display a warning  it might be overlooked by the user and might result in unintentional input submission  Throwing an error or displaying the warning properly would solve this  Speed  This might be slower in microseconds than the regex method    Advantages  Assuming the user have basic knowledge to read and understand    Highly customizable with options  Works cross browser and independent of language  Makes use of already available features in a form to display errors and warnings

User · Answer

You can use pattern for this    lt input id  numbers  pattern   0-9     type  number  gt    Here you can see the complete mobile website interface tips

User · Answer

Code bellow will also check for PASTE event  Uncomment  ruleSetArr 4  and add concate  to  ruleSetArr  to allow FLOAT numbers  Easy copy paste function  Call it with your input element in parameter  Example  inputIntTypeOnly    input name  inputName        x000D   x000D  function inputIntTypeOnly elm   x000D      elm on  keydown  function event   x000D          var e   event    window event  x000D              key   e keyCode    e which  x000D              ruleSetArr 1    8 9 46      backspace tab delete x000D              ruleSetArr 2    48 49 50 51 52 53 54 55 56 57      top keyboard num keys x000D              ruleSetArr 3    96 97 98 99 100 101 102 103 104 105      side keyboard num keys x000D              ruleSetArr 4    17 67 86      Ctrl  amp  V x000D              ruleSetArr 5    110 189 190   add this to ruleSetArr to allow float values x000D              ruleSetArr   ruleSetArr 1 concat ruleSetArr 2 ruleSetArr 3 ruleSetArr 4      merge arrays of keys x000D     x000D              if ruleSetArr indexOf        undefined       check if browser supports indexOf     IE8 and earlier x000D                  var retRes   ruleSetArr indexOf key   x000D                else    x000D                  var retRes     inArray key ruleSetArr   x000D                 x000D              if retRes    -1      if returned key not found in array  return false x000D                  return false  x000D                else if key    67    key    86      account for paste events x000D                  event stopPropagation    x000D                 x000D   x000D         on  paste  function event   x000D          var  thisObj     this   x000D              origVal    thisObj val       orig value x000D              newVal   event originalEvent clipboardData getData  Text       paste clipboard value x000D          if newVal replace   D  g                 if paste value is not a number  insert orig value and ret false x000D               thisObj val origVal   x000D              return false  x000D            else   x000D               thisObj val newVal replace   D  g        x000D              return false  x000D             x000D     x000D          x000D     x000D   x000D  var inptElm      input name  inputName      x000D   x000D  inputIntTypeOnly inptElm   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt input type  text  name  inputName  value  1  gt  x000D   x000D   x000D

User · Answer

Here s a nice simple solution that I like to use   function numeric only  event  input        if   event which  lt  32      event which  gt  126   return true       return jQuery isNumeric    input  val      String fromCharCode  event which        numeric only    lt input type  text  onkeypress  return numeric only  event  this      gt    Explanation   Using  event which  - first determine if it s a printable character  If it isn t then allow it  for things like delete and backspace   Otherwise  concatinate the character to the end of the string and test it using the jQuery  isNumeric  function  This takes all of the tedium away from testing each individual character and also works for cut   paste scenarios   If you want to get really cute then you can create a new HTML input type  Let s call it  numeric  so that you can have the tag    lt input type  numeric    gt    which will only allow numeric characters  Just add the following  document ready  command     document  ready  function             input type numeric    keypress  function  event            if   event which  lt  32      event which  gt  126   return true           return jQuery isNumeric    this  val      String fromCharCode  event which              numeric keypress        document ready    HTML doesn t care what type name you use - if it doesn t recognize it then it will use a textbox by default  so you can do this  Your editor may complain but  hey  that s its problem  No doubt puritans will freak out  but it works  is easy and so far it s been pretty robust for me

User · Answer

HTML5 supports regexes  so you could use this    lt input id  numbersOnly  pattern   0-9     type  text  gt    Warning   Some browsers don t support this yet

User · Answer

I personally suggest to use the autoNumeric plugin from http   www decorplanit com plugin  - it supports all different variations like prefix suffix handling  currency handling  negative value formatting  min  max etc

User · Answer

I realize an old post but i thought this could help someone  Recently I had to limit a text box to just 5 decimal places  In my case ALSO the users input had to be less than 0 1   lt input type  text  value    maxlength 7 style  width 50px  id  fmargin  class  formText   name  textfield  onkeyup  return doCheck   fmargin  event    gt    Here is the doCheck function  function doCheck id evt        var temp parseFloat   id  val          if  isNaN temp           temp  0 0       if  temp  0          temp  0 0          id  val temp       Here is the same function except to force integer input  function doCheck id evt        var temp parseInt   id  val          if  isNaN temp           temp  0          id  val temp       hope that helps someone

User · Answer

I tweaked it some  but it needs a lot more work to conform to the JavaScript weirding way   function validateNumber myEvent decimal        var e   myEvent    window event      var key   e keyCode    e which       if  e shiftKey          else if  e altKey          else if  e ctrlKey          else if  key     48       0       else if  key     49       1       else if  key     50       2       else if  key     51       3       else if  key     52       4       else if  key     53       5       else if  key     54       6       else if  key     55       7       else if  key     56       8       else if  key     57       9        else if  key     96       Numeric keypad 0       else if  key     97       Numeric keypad 1       else if  key     98       Numeric keypad 2       else if  key     99       Numeric keypad 3       else if  key     100       Numeric keypad 4       else if  key     101       Numeric keypad 5       else if  key     102       Numeric keypad 6       else if  key     103       Numeric keypad 7       else if  key     104       Numeric keypad 8       else if  key     105       Numeric keypad 9        else if  key     8       Backspace       else if  key     9       Tab       else if  key     13       Enter       else if  key     35       Home       else if  key     36       End       else if  key     37       Left Arrow       else if  key     39       Right Arrow       else if  key     190  amp  amp  decimal       decimal       else if  key     110  amp  amp  decimal       period on keypad          else if  key     188       comma       else if  key     109       minus       else if  key     46       Del       else if  key     45       Ins       else           e returnValue   false          if  e preventDefault  e preventDefault              And then it s called via      input name Price    keydown function myEvent        validateNumber myEvent true

User · Answer

I realize an old post but i thought this could help someone  Recently I had to limit a text box to just 5 decimal places  In my case ALSO the users input had to be less than 0 1   lt input type  text  value    maxlength 7 style  width 50px  id  fmargin  class  formText   name  textfield  onkeyup  return doCheck   fmargin  event    gt    Here is the doCheck function  function doCheck id evt        var temp parseFloat   id  val          if  isNaN temp           temp  0 0       if  temp  0          temp  0 0          id  val temp       Here is the same function except to force integer input  function doCheck id evt        var temp parseInt   id  val          if  isNaN temp           temp  0          id  val temp       hope that helps someone

User · Answer

One more example where you can add only numbers in the input field  can not letters   lt input type  text  class  form-control  id  phone  name  phone  placeholder  PHONE  spellcheck  false  oninput  this value   this value replace    0-9   g      replace           g    1     gt

User · Answer

Give the input field a class   lt input class  digit      gt    and use jquery as below    jQuery document  ready function                  jQuery  input digit   live  input keyup  function e   jQuery this  val jQuery this  val   replace      d  g                  Above code also works to disable special characters in Ctrl V strokes and right click strokes also

User · Answer

Note  This is an updated answer  Comments below refer to an old version which messed around with keycodes   JavaScript  Try it yourself on JSFiddle   You can filter the input values of a text  lt input gt  with the following setInputFilter function  supports Copy Paste  Drag Drop  keyboard shortcuts  context menu operations  non-typeable keys  the caret position  different keyboard layouts  and all browsers since IE 9       Restricts input for the given textbox to the given inputFilter function  function setInputFilter textbox  inputFilter        input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event        textbox addEventListener event  function           if  inputFilter this value             this oldValue   this value          this oldSelectionStart   this selectionStart          this oldSelectionEnd   this selectionEnd          else if  this hasOwnProperty  oldValue              this value   this oldValue          this setSelectionRange this oldSelectionStart  this oldSelectionEnd           else           this value                                 You can now use the setInputFilter function to install an input filter   setInputFilter document getElementById  myTextBox    function value      return    d     d    test value      Allow digits and     only  using a RegExp       See the JSFiddle demo for more input filter examples  Also note that you still must do server side validation   TypeScript  Here is a TypeScript version of this   function setInputFilter textbox  Element  inputFilter   value  string    gt  boolean   void         input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event            textbox addEventListener event  function this   HTMLInputElement   HTMLTextAreaElement   amp   oldValue  string  oldSelectionStart  number   null  oldSelectionEnd  number   null                 if  inputFilter this value                     this oldValue   this value                  this oldSelectionStart   this selectionStart                  this oldSelectionEnd   this selectionEnd                else if  Object prototype hasOwnProperty call this   oldValue                      this value   this oldValue                  if  this oldSelectionStart     null  amp  amp                      this oldSelectionEnd     null                        this setSelectionRange this oldSelectionStart  this oldSelectionEnd                                   else                   this value                                             jQuery  There is also a jQuery version of this  See this answer   HTML 5  HTML 5 has a native solution with  lt input type  number  gt   see the specification   but note that browser support varies    Most browsers will only validate the input when submitting the form  and not when typing  Most mobile browsers don t support the step  min and max attributes  Chrome  version 71 0 3578 98  still allows the user to enter the characters e and E into the field  Also see this question  Firefox  version 64 0  and Edge  EdgeHTML version 17 17134  still allow the user to enter any text into the field    Try it yourself on w3schools com

User · Answer

I was looking for a way to block an input of numbers  then  as I did not find it in answers  this code worked fine for me   I just need to input it in the onkeypress event   If you need just to block an input of numbers  I believe this will work fine      onkeypress  if event which  amp lt  48    event which  amp gt  57   if event which    8  if e keyCode    9  return false

User · Answer

Here is a very short solution that doesn t use the deprecated keyCode or which  doesn t block any non input keys  and uses pure javascript   Tested in Chromium 70 0 3533  Firefox 62 0  and Edge 42 17134 1 0   HTML    lt input type  text  onkeypress  validate event   gt    JS   function validate ev        if   ev            ev   window event             if   ev ctrlKey  amp  amp  ev key length     1  amp  amp   isNaN  ev key     ev key                     return ev preventDefault

User · Answer

lt input name  amount  type  text  value  Only number in here   gt     lt script gt         input name amount    keyup function              this  val   this  val   replace     d                  lt  script gt

User · Answer

Here is a simple one which allows for exactly one decimal  but no more   x000D   x000D   lt input type  text  oninput  this value   this value replace    0-9   g      replace              g    1       gt  x000D   x000D   x000D

User · Answer

Regular expressions and the match function can work well for this situation   For instance  I used the following to validate 4 input boxes that served as coordinates on a graph   It works reasonably well   function validateInput        if  jQuery   x1   val   toString   match    -   0-9        0-9         null            jQuery   x2   val   toString   match    -   0-9        0-9         null            jQuery   y1   val   toString   match    -   0-9        0-9         null           jQuery   y2   val   toString   match    -   0-9        0-9         null             alert  A number must be entered for each coordinate  even if that number is 0  Please try again              location reload

User · Answer

Remember the regional differences  Euros use periods and commas in the reverse way as Americans   plus the minus sign  or the convention of wrapping a number in parentheses to indicate negative   plus exponential notation  I m reaching on that one

User · Answer

Remember the regional differences  Euros use periods and commas in the reverse way as Americans   plus the minus sign  or the convention of wrapping a number in parentheses to indicate negative   plus exponential notation  I m reaching on that one

User · Answer

Note  This is an updated answer  Comments below refer to an old version which messed around with keycodes   JavaScript  Try it yourself on JSFiddle   You can filter the input values of a text  lt input gt  with the following setInputFilter function  supports Copy Paste  Drag Drop  keyboard shortcuts  context menu operations  non-typeable keys  the caret position  different keyboard layouts  and all browsers since IE 9       Restricts input for the given textbox to the given inputFilter function  function setInputFilter textbox  inputFilter        input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event        textbox addEventListener event  function           if  inputFilter this value             this oldValue   this value          this oldSelectionStart   this selectionStart          this oldSelectionEnd   this selectionEnd          else if  this hasOwnProperty  oldValue              this value   this oldValue          this setSelectionRange this oldSelectionStart  this oldSelectionEnd           else           this value                                 You can now use the setInputFilter function to install an input filter   setInputFilter document getElementById  myTextBox    function value      return    d     d    test value      Allow digits and     only  using a RegExp       See the JSFiddle demo for more input filter examples  Also note that you still must do server side validation   TypeScript  Here is a TypeScript version of this   function setInputFilter textbox  Element  inputFilter   value  string    gt  boolean   void         input    keydown    keyup    mousedown    mouseup    select    contextmenu    drop   forEach function event            textbox addEventListener event  function this   HTMLInputElement   HTMLTextAreaElement   amp   oldValue  string  oldSelectionStart  number   null  oldSelectionEnd  number   null                 if  inputFilter this value                     this oldValue   this value                  this oldSelectionStart   this selectionStart                  this oldSelectionEnd   this selectionEnd                else if  Object prototype hasOwnProperty call this   oldValue                      this value   this oldValue                  if  this oldSelectionStart     null  amp  amp                      this oldSelectionEnd     null                        this setSelectionRange this oldSelectionStart  this oldSelectionEnd                                   else                   this value                                             jQuery  There is also a jQuery version of this  See this answer   HTML 5  HTML 5 has a native solution with  lt input type  number  gt   see the specification   but note that browser support varies    Most browsers will only validate the input when submitting the form  and not when typing  Most mobile browsers don t support the step  min and max attributes  Chrome  version 71 0 3578 98  still allows the user to enter the characters e and E into the field  Also see this question  Firefox  version 64 0  and Edge  EdgeHTML version 17 17134  still allow the user to enter any text into the field    Try it yourself on w3schools com

User · Answer

I personally suggest to use the autoNumeric plugin from http   www decorplanit com plugin  - it supports all different variations like prefix suffix handling  currency handling  negative value formatting  min  max etc

User · Answer

You can attach to the key down event and then filter keys according to what you need  for example    lt input id  FIELD ID  name  FIELD ID  onkeypress  return validateNUM event this     type  text  gt    And the actual JavaScript handler would be   function validateNUM e field        var key   getKeyEvent e      if  specialKey key   return true      if   key  gt   48  amp  amp  key  lt   57      key    46            if  key    46              return true          else              if  field value search          -1  amp  amp  field value length  gt  0                  return true              else                 return false                   function getKeyEvent e       var keynum     var keychar     var numcheck     if window event     IE         keynum   e keyCode     else if e which     Netscape Firefox Opera         keynum   e which     return keynum

User · Answer

function digitsOnly obj       obj value   obj value replace   D g           and in the element   lt input type  text  onkeyup  digitsOnly this      gt

User · Answer

Use this DOM   lt input type  text  onkeypress  validate event     gt    And this script  function validate evt      var theEvent   evt    window event        Handle paste   if  theEvent type      paste           key   event clipboardData getData  text plain        else        Handle key press       var key   theEvent keyCode    theEvent which        key   String fromCharCode key         var regex     0-9         if   regex test key          theEvent returnValue   false      if theEvent preventDefault  theEvent preventDefault

User · Answer

HTML5 supports regexes  so you could use this    lt input id  numbersOnly  pattern   0-9     type  text  gt    Warning   Some browsers don t support this yet

User · Answer

Most answers here all have the weakness of using key- events    Many of the answers would limit your ability to do text selection with keyboard macros  copy paste and more unwanted behavior  others seem to depend on specific jQuery plugins  which is killing flies with machineguns    This simple solution seems to work best for me cross platform  regardless of input mechanism  keystroke  copy paste  rightclick copy paste  speech-to-text etc    All text selection keyboard macros would still work  and it would even limit ones ability to set a non-numeric value by script   function forceNumeric        var  input     this        input val  input val   replace     d   g            body   on  propertychange input    input type  number     forceNumeric

User · Answer

This is an improved function   function validateNumber evt      var theEvent   evt    window event    var key   theEvent keyCode    theEvent which    if   key  lt  48    key  gt  57   amp  amp    key    8    key    9    key    13    key    37    key    39    key    46         theEvent returnValue   false      if  theEvent preventDefault  theEvent preventDefault

User · Answer

this also work for persian and arabic number      setNumericInput  function  event              var key   window event   event keyCode   event which           if  event keyCode     8             key  gt   48  amp  amp  key  lt   57              key  gt   1776  amp  amp  key  lt   1785                 return true             else               event preventDefault

User · Answer

So simple         In a JavaScript function  can use HTML or PHP    function isNumberKey evt       var charCode    evt which    evt which   evt keyCode      if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false      return true      In your form input    lt input type text name form number size 20 maxlength 12 onkeypress  return isNumberKey event   gt    With input max   These above allows for a 12-digit number

User · Answer

Use this DOM   lt input type  text  onkeypress  validate event     gt    And this script  function validate evt      var theEvent   evt    window event        Handle paste   if  theEvent type      paste           key   event clipboardData getData  text plain        else        Handle key press       var key   theEvent keyCode    theEvent which        key   String fromCharCode key         var regex     0-9         if   regex test key          theEvent returnValue   false      if theEvent preventDefault  theEvent preventDefault

User · Answer

Regular expressions and the match function can work well for this situation   For instance  I used the following to validate 4 input boxes that served as coordinates on a graph   It works reasonably well   function validateInput        if  jQuery   x1   val   toString   match    -   0-9        0-9         null            jQuery   x2   val   toString   match    -   0-9        0-9         null            jQuery   y1   val   toString   match    -   0-9        0-9         null           jQuery   y2   val   toString   match    -   0-9        0-9         null             alert  A number must be entered for each coordinate  even if that number is 0  Please try again              location reload

User · Answer

You may try using the    onkeydown    event and cancel the event  event preventDefault or something like that  when it s not one of the allowed keys

User · Answer

My solution for a better user experience      HTML    lt input type  tel  gt       jQuery       type tel    on  change   function e        e target  val   e target  val   replace     d    g              type tel    on  keypress   function e      keys     0   1   2   3   4   5   6   7   8   9         return keys indexOf event key   gt  -1      Details   First of all  input types   number shows up down arrows shrinking the actual input space  I find them ugly and are only useful if the number represents a quantity  things like phones  area codes  IDs    don t need them  tel provides similar browser validations of number without arrows  Using  number   tel  also helps showing numeric keyboard on mobile devices   For the JS validation I ended up needing 2 functions  one for the normal user input  keypress  and the other for a copy paste fix  change   other combinations would give me a terrible user experience   I use the more reliable KeyboardEvent key instead of the now deprecated KeyboardEvent charCode  And depending of your browser support you can consider using Array prototype includes   instead of the poorly named Array prototype indexOf    for true   false results

User · Answer

A easy way to resolve this problem is implementing a jQuery function to validate with regex the charaters typed in the textbox for example   Your html code    lt input class  integerInput  type  text  gt    And the js function using jQuery    function             integerInput   on  input   function           this value   this value          replace     d  g         numbers and decimals only                 x000D   x000D    function     x000D              integerInput   on  input   function     x000D            this value   this value x000D               replace     d  g         numbers and decimals only x000D               x000D              x000D          x000D   lt script x000D       src  https   code jquery com jquery-2 2 4 min js  x000D       integrity  sha256-BbhdlvQf xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44   x000D       crossorigin  anonymous  gt  x000D   lt  script gt  x000D   x000D   lt input type  text  class  integerInput   gt  x000D   x000D   x000D     x000D   x000D   x000D

User · Answer

This removes any bad character instantly  allows only one dot  is short  and allows backspace  etc        numberInput   keyup function          s   this  val        if      d     d    test s     this  val s substr 0 s length-1

User · Answer

I saw some great answers however I like them as small and as simple as possible  so maybe someone will benefit from it  I would use javascript Number   and isNaN functionality like this   if isNaN Number str                Exception it is NOT a number   else             Do something you have a number     Hope this helps

User · Answer

You may try using the    onkeydown    event and cancel the event  event preventDefault or something like that  when it s not one of the allowed keys

User · Answer

I finished using this function  onkeypress  quot if event which  lt  48    event which  gt  57   if event which    8  return false  quot   This works well in IE and Chrome  I don  t know why it  s not work well in firefox too  this function block the tab key in Firefox  For the tab key works fine in firefox add this  onkeypress  quot if event which  lt  48    event which  gt  57   if event which    8  if event keyCode    9  return false  quot

User · Answer

Below function will check for every input char if it is number   numeric  value   gt        let numset   new Set   0    1    2    3    4    5    6    7    8    9         console log numset has value substring value length - 1  value length

User · Answer

Hope I am not beating a dead horse with an ugly stick here  but I am using this for my website quantity input  it allows only numbers from 1 to 99   Try it   https   jsfiddle net 83va5sb9          lt input min  1  type  text  id  quantity  name  quantity  value  1        onKeyUp  numbersonly    gt          lt script gt      function numbersonly           var str   document getElementById  quantity   value       var newstr            for  i   0  i  lt  str length  i              for  ii   1  ii  lt  10  ii                if  str charAt i  indexOf ii   gt  -1                newstr    str charAt i                                      if  newstr                  newstr   1               if  parseInt newstr   gt  99            newstr   99               document getElementById  quantity   value   newstr             lt  script gt

User · Answer

Use this DOM   lt input type  text  onkeypress  validate event     gt    And this script  function validate evt      var theEvent   evt    window event        Handle paste   if  theEvent type      paste           key   event clipboardData getData  text plain        else        Handle key press       var key   theEvent keyCode    theEvent which        key   String fromCharCode key         var regex     0-9         if   regex test key          theEvent returnValue   false      if theEvent preventDefault  theEvent preventDefault

User · Answer

Here is a very short solution that doesn t use the deprecated keyCode or which  doesn t block any non input keys  and uses pure javascript   Tested in Chromium 70 0 3533  Firefox 62 0  and Edge 42 17134 1 0   HTML    lt input type  text  onkeypress  validate event   gt    JS   function validate ev        if   ev            ev   window event             if   ev ctrlKey  amp  amp  ev key length     1  amp  amp   isNaN  ev key     ev key                     return ev preventDefault

User · Answer

Give the input field a class   lt input class  digit      gt    and use jquery as below    jQuery document  ready function                  jQuery  input digit   live  input keyup  function e   jQuery this  val jQuery this  val   replace      d  g                  Above code also works to disable special characters in Ctrl V strokes and right click strokes also

User · Answer

My solution for a better user experience      HTML    lt input type  tel  gt       jQuery       type tel    on  change   function e        e target  val   e target  val   replace     d    g              type tel    on  keypress   function e      keys     0   1   2   3   4   5   6   7   8   9         return keys indexOf event key   gt  -1      Details   First of all  input types   number shows up down arrows shrinking the actual input space  I find them ugly and are only useful if the number represents a quantity  things like phones  area codes  IDs    don t need them  tel provides similar browser validations of number without arrows  Using  number   tel  also helps showing numeric keyboard on mobile devices   For the JS validation I ended up needing 2 functions  one for the normal user input  keypress  and the other for a copy paste fix  change   other combinations would give me a terrible user experience   I use the more reliable KeyboardEvent key instead of the now deprecated KeyboardEvent charCode  And depending of your browser support you can consider using Array prototype includes   instead of the poorly named Array prototype indexOf    for true   false results

User · Answer

You can attach to the key down event and then filter keys according to what you need  for example    lt input id  FIELD ID  name  FIELD ID  onkeypress  return validateNUM event this     type  text  gt    And the actual JavaScript handler would be   function validateNUM e field        var key   getKeyEvent e      if  specialKey key   return true      if   key  gt   48  amp  amp  key  lt   57      key    46            if  key    46              return true          else              if  field value search          -1  amp  amp  field value length  gt  0                  return true              else                 return false                   function getKeyEvent e       var keynum     var keychar     var numcheck     if window event     IE         keynum   e keyCode     else if e which     Netscape Firefox Opera         keynum   e which     return keynum

User · Answer

This is the extended version of geowa4 s solution  Supports min and max attributes  If the number is out of range  the previous value will be shown   You can test it here   Usage   lt input type text class  number  maxlength 3 min 1 max 500 gt   function number e    var theEvent   e    window event  var key   theEvent keyCode    theEvent which  if key  13 amp  amp key  9    allow enter and tab   key   String fromCharCode  key      var regex     0-9         if   regex test key         theEvent returnValue   false      if theEvent preventDefault  theEvent preventDefault                      document  ready function           input type text    filter   number  NUMBER   on            focus  function e              e target  data  oldValue    e target  val                             keypress  function e                   e target oldvalue   e target value                  number e                           change  function e               var t   e target              var min     t  attr  min                var max     t  attr  max                var val   parseInt   t  val   10                         if  val lt min    max lt val                                        alert  Error                           t  val   t  data  oldValue                                                                If the inputs are dynamic use this     document  ready function           body   on  focus   input type text  number  NUMBER  function e             e target  data  oldValue    e target  val                     body   on  keypress   input type text  number  NUMBER  function e           e target oldvalue   e target value          number e                   body   on  change   input type text  number  NUMBER  function e           var t   e target         var min     t  attr  min            var max     t  attr  max            var val   parseInt   t  val                      if  val lt min    max lt val                                alert  Error                       t  val   t  data  oldValue

User · Answer

lt input type  quot tel quot             onkeypress  quot return onlyNumberKey event  quot  gt   in script tag function onlyNumberKey evt                     Only ASCII charactar in that range allowed        var ASCIICode    evt which    evt which   evt keyCode        if  ASCIICode  gt  31  amp  amp   ASCIICode  lt  48    ASCIICode  gt  57              return false         return true

User · Answer

Please find below mentioned solution  In this user can be able to enter only numeric value  Also user can not be able to copy  paste  drag and drop in input       Allowed Characters   0 1 2 3 4 5 6 7 8 9      Not allowed Characters and Characters through events    Alphabetic value Special characters Copy Paste Drag Drop    x000D   x000D    document  ready function     x000D        number   bind  cut copy paste drag drop   function e    x000D        e preventDefault    x000D             x000D      x000D  function isNumberKey evt    x000D      var charCode    evt which    evt which   evt keyCode  x000D      if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57   x000D          return false  x000D      return true  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  text  class  form-control  name  number  id  number  onkeypress  return isNumberKey event   placeholder  Enter Numeric value only  gt  x000D   x000D   x000D    Let me know if it not works

User · Answer

x000D   x000D  var userName   document querySelector   numberField     userName addEventListener  input   restrictNumber   function restrictNumber  e        var newValue   this value replace new RegExp     d    ig           this value   newValue    x000D   lt input type  text  id  numberField  gt  x000D   x000D   x000D

User · Answer

You can also compare input value  which is treated as string by default  to itself forced as numeric  like    if event target value    event target value   1           returns true if input value is numeric string     However  you need to bind that to event like keyup etc

User · Answer

Below function will check for every input char if it is number   numeric  value   gt        let numset   new Set   0    1    2    3    4    5    6    7    8    9         console log numset has value substring value length - 1  value length

User · Answer

Here s a nice simple solution that I like to use   function numeric only  event  input        if   event which  lt  32      event which  gt  126   return true       return jQuery isNumeric    input  val      String fromCharCode  event which        numeric only    lt input type  text  onkeypress  return numeric only  event  this      gt    Explanation   Using  event which  - first determine if it s a printable character  If it isn t then allow it  for things like delete and backspace   Otherwise  concatinate the character to the end of the string and test it using the jQuery  isNumeric  function  This takes all of the tedium away from testing each individual character and also works for cut   paste scenarios   If you want to get really cute then you can create a new HTML input type  Let s call it  numeric  so that you can have the tag    lt input type  numeric    gt    which will only allow numeric characters  Just add the following  document ready  command     document  ready  function             input type numeric    keypress  function  event            if   event which  lt  32      event which  gt  126   return true           return jQuery isNumeric    this  val      String fromCharCode  event which              numeric keypress        document ready    HTML doesn t care what type name you use - if it doesn t recognize it then it will use a textbox by default  so you can do this  Your editor may complain but  hey  that s its problem  No doubt puritans will freak out  but it works  is easy and so far it s been pretty robust for me

User · Answer

You can use pattern for this    lt input id  numbers  pattern   0-9     type  number  gt    Here you can see the complete mobile website interface tips

User · Answer

When it comes to fool-proofing UX  one should always try to keep a reference point for the  user s intelligence    While neglecting everything other than numbers  a dot and a hyphen would seem like the perfect choice  you should also consider letting them enter any content  and when they re done  purify the input  if not a valid number  show error  This method would make sure no matter what the user manages to do  the result will always be valid  If the user is naive enough not to understand the warnings and error messages  pressing a button and seeing that nothing happens  as in keycode comparison  will only confuse him her more   Also  for forms  validation and error message display are almost a necessity  So  the provisions might already be there  Here s the algorithm         On losing-focus or form-submission  do following       1 1  Read content from the input and apply parseFloat to result      1 2  If the result is a Non-accessible-Number  NaN   reset the input field and pop-up an error message   Please enter a valid number    eg  235 or -654 or 321 526 or -6352 646584        1 3  Else  if String result     content from input   change value of the field to result and show warning message   The value you   entered have been modified  Input must be a valid number  eg  235 or   -654 or 321 526 or -6352 646584   For a field that cannot allow any unconfirmed value  then this condition may be added to step 1 2       1 4  Else  do nothing       This method also gives you the added advantage of performing validations based on minimum value  maximum value  decimal places  etc if necessary  Just have to do these operations on the result after step 1 2   Disadvantages    The input will allow the user to enter any value until the focus is lost or the form is submitted  But if the instructions on filling the field were clear enough  in 90  of the cases this might not come up  If step 1 3 is used to display a warning  it might be overlooked by the user and might result in unintentional input submission  Throwing an error or displaying the warning properly would solve this  Speed  This might be slower in microseconds than the regex method    Advantages  Assuming the user have basic knowledge to read and understand    Highly customizable with options  Works cross browser and independent of language  Makes use of already available features in a form to display errors and warnings

User · Answer

Please find below mentioned solution  In this user can be able to enter only numeric value  Also user can not be able to copy  paste  drag and drop in input       Allowed Characters   0 1 2 3 4 5 6 7 8 9      Not allowed Characters and Characters through events    Alphabetic value Special characters Copy Paste Drag Drop    x000D   x000D    document  ready function     x000D        number   bind  cut copy paste drag drop   function e    x000D        e preventDefault    x000D             x000D      x000D  function isNumberKey evt    x000D      var charCode    evt which    evt which   evt keyCode  x000D      if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57   x000D          return false  x000D      return true  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt input type  text  class  form-control  name  number  id  number  onkeypress  return isNumberKey event   placeholder  Enter Numeric value only  gt  x000D   x000D   x000D    Let me know if it not works

User · Answer

HTML5 has  lt input type number   which sounds right for you  Currently  only Opera supports it natively  but there is a project that has a JavaScript implementation

User · Answer

Here is a simple one which allows for exactly one decimal  but no more   x000D   x000D   lt input type  text  oninput  this value   this value replace    0-9   g      replace              g    1       gt  x000D   x000D   x000D

User · Answer

I tweaked it some  but it needs a lot more work to conform to the JavaScript weirding way   function validateNumber myEvent decimal        var e   myEvent    window event      var key   e keyCode    e which       if  e shiftKey          else if  e altKey          else if  e ctrlKey          else if  key     48       0       else if  key     49       1       else if  key     50       2       else if  key     51       3       else if  key     52       4       else if  key     53       5       else if  key     54       6       else if  key     55       7       else if  key     56       8       else if  key     57       9        else if  key     96       Numeric keypad 0       else if  key     97       Numeric keypad 1       else if  key     98       Numeric keypad 2       else if  key     99       Numeric keypad 3       else if  key     100       Numeric keypad 4       else if  key     101       Numeric keypad 5       else if  key     102       Numeric keypad 6       else if  key     103       Numeric keypad 7       else if  key     104       Numeric keypad 8       else if  key     105       Numeric keypad 9        else if  key     8       Backspace       else if  key     9       Tab       else if  key     13       Enter       else if  key     35       Home       else if  key     36       End       else if  key     37       Left Arrow       else if  key     39       Right Arrow       else if  key     190  amp  amp  decimal       decimal       else if  key     110  amp  amp  decimal       period on keypad          else if  key     188       comma       else if  key     109       minus       else if  key     46       Del       else if  key     45       Ins       else           e returnValue   false          if  e preventDefault  e preventDefault              And then it s called via      input name Price    keydown function myEvent        validateNumber myEvent true

User · Answer

This is the easy solution  Replace  price-input input quantity with the class of your input feild      price-input input quantity   on  keypress keyup blur  function  event                 this  val   this  val   replace     d                    if   event which  lt  48    event which  gt  57                 event preventDefault

User · Answer

Another easy way with jQuery       Numeric   bind  keydown  function e       if  e which  lt  48    e which  gt  57          return false      return true       Now just set your each inputs class to Numeric  like    lt input type  text  id  inp2  name  inp2  class  Numeric    gt

[javascript] HTML text input allow only numeric input

Examples related to javascript

Examples related to jquery

Examples related to html