Best way to restrict a text field to numbers only

Question

I m using the following Javascript to restrict a text field on my website to only accept numerical input  and no other letters or characters  The problem is  it REALLY rejects all other key inputs  like ctrl-A to select the text  or even any other browser functions like ctrl-T or ctrl-W while the text box is selected  Does anyone know of a better script to only allow numerical input  but not block normal commands  that aren t being directly input into the field   Thanks Here is the code I m using now   function numbersonly e  decimal         var key      var keychar       if  window event           key   window event keyCode      else if  e           key   e which      else          return true       keychar   String fromCharCode key        if   key  null      key  0      key  8       key  9      key  13      key  27          return true           else if     0123456789   indexOf keychar   gt  -1          return true      else if  decimal  amp  amp   keychar                 return true              else        return false      Edit  None of the solutions provided have solved my problem of allowing commands like ctrl-A while the text box is selected  That was the whole point of my asking here  so I have gone back to using my original script  Oh well

User · Answer

In order to block anything but numbers from being input into a text field but still allowing for other buttons to work (such as delete, shift, tab, etc.) look at a reference of the Javascript key codes; anything from 65 on up (to 222) can be blocked.

Using Jquery and Javascript, that would look like:

$('#textFieldId').keydown(function(event) {
    if ( event.keyCode > 64 ) {
        event.preventDefault();
    }
});

The key codes will be the same in Javascript whether or not Jquery is used.

User · Answer

Just use regex to get rid of any non number characters whenever a key is pressed or the textbox loses focus   var numInput  window onload   function             numInput   document getElementById  numonly        numInput onkeydown   numInput onblur   numInput onkeyup   function                 numInput value   numInput value replace    0-9

User · Answer

I came across your question while trying to figure this out myself  Here is the solution that I came up with      Prevent user from entering non-numeric characters in number boxes   function  inputs        var input      var f   function  e            var unicodeRe    U    d                Chrome doesn t support the standard key property  so use keyIdentifier instead             Instead of the actual character that  key  returns  keyIdentifier returns            A string such as  U 004F  representing the unicode character              For special characters  e g    Shift   a string containing the name of the key is returned           var ch   e key    e keyIdentifier          var match   ch match unicodeRe              keyIdentifier returns a unicode  Convert to string          if  match                ch   String fromCharCode Number parseInt match 1   16                      console log ch           if  ch length     1  amp  amp     0-9   test ch                 if      b   test ch        Don t prevent backspace                  e preventDefault                                       for  var i   0  l   inputs length  i  lt  l  i    1            input   inputs i           input onkeydown   f          document querySelectorAll  input type number   routeFilterBox        Edit  I ve discovered that my solution does not allow the user to enter numbers via the numpad in Chrome  The 0-9 keypad keys seem to be returning the character     for 0 and A-I for the rest of the number keys

User · Answer

This JavaScript function will be used to restrict alphabets and   special characters in Textbox   only numbers  delete  arrow keys and   backspace will be allowed  JavaScript Code Snippet - Allow Numbers   in TextBox  Restrict Alphabets and Special Characters   Tested in IE  amp  Chrome   JavaScript function   lt script type  text javascript  gt        code  48-57 Numbers       8  - Backspace        35 - home key  36 - End key       37-40  Arrow keys  46 - Delete key       function restrictAlphabets e           var x e which  e keycode          if  x gt  48  amp  amp  x lt  57     x  8                 x gt  35  amp  amp  x lt  40    x  46              return true          else             return false         lt  script gt    HTML Source Code with JavaScript    lt html gt       lt head gt           lt title gt JavaScript - Allow only numbers in TextBox  Restrict Alphabets and Special Characters   lt  title gt           lt script type  text javascript  gt                code  48-57 Numbers               8  - Backspace                35 - home key  36 - End key               37-40  Arrow keys  46 - Delete key               function restrictAlphabets e                   var x e which  e keycode                  if  x gt  48  amp  amp  x lt  57     x  8                         x gt  35  amp  amp  x lt  40    x  46                      return true                  else                     return false                         lt  script gt       lt  head gt   lt body style  text-align  center   gt       lt h1 gt JavaScript - Allow only numbers in TextBox  Restrict Alphabets and Special Characters   lt  h1 gt       lt big gt Enter numbers only   lt  big gt       lt input type  text  onkeypress  return restrictAlphabets event    gt   lt  body gt    lt  html gt    Refrence

User · Answer

It s worth pointing out that no matter how tightly you manage to control this via the front end  Javascript  HTML  etc   you still need to validate it at the server  because there s nothing to stop a user from turning off javascript  or even deliberately posting junk to your form to try to hack you   My advice  Use the HTML5 markup so that browsers which support it will use it  Also use the JQuery option previously suggested  the inital solution may have flaws  but it seems like the comments have been working through that   And then do server-side validation as well

User · Answer

I know that there are already many answers but for the sake of simplicity i would like to add another answer which is simple and self explanatory in which we do not have to remember keycodes and it also works across all browsers     x000D   x000D  document getElementById  myinput   onkeydown   function e  x000D     x000D       console log e key   x000D         console log e target value   x000D       switch  e key  x000D         x000D           case  1   x000D           case  2   x000D           case  3   x000D           case  4   x000D           case  5   x000D           case  6   x000D           case  7   x000D           case  8   x000D           case  9   x000D           case  0   x000D           case  Backspace   x000D               return true  x000D               break  x000D   x000D           case      x000D               if  e target value indexOf         -1  x000D                 x000D                   return true  x000D                 x000D               else x000D                 x000D                   return false  x000D                 x000D               break  x000D   x000D           default  x000D               return false  x000D         x000D   x000D     x000D   lt input type  text  placeholder  Enter Value  id  myinput    gt  x000D   x000D   x000D

User · Answer

The only event that contains information about the character typed is keypress  Anything character-related you may infer from the keyCode property of keydown or keyup events is unreliable and dependent on a particular keyboard mapping  The following will prevent non-numeric keyboard input all major browsers by using the character obtained from the keypress event  It won t prevent the user from pasting or dragging non-numeric text in   var input   document getElementById  your input     input onkeypress   function evt        evt   evt    window event      if   evt ctrlKey  amp  amp   evt metaKey  amp  amp   evt altKey            var charCode    typeof evt which     undefined     evt keyCode   evt which          if  charCode  amp  amp     d  test String fromCharCode charCode                  return false

User · Answer

There is my current solution of numeric input  need to test in different browsers but seems to work  Support comma and period delimiter  czech native is comma   space and numpad keyboard numbers input  Allow Ctrl C Ctrl A or Ctrl X  arrow navigation and delete block Ctrl V  React on escape key by blurring input   Watch my Coffee script        - gt      fn onlyNumbers   - gt       each - gt             keydown  e  - gt            get code of key         code   if e keyCode then e keyCode else e which          return      blur   if code is 27   blur on escape         return if code in  46  8  9  13    46  8  9  27  13   backspace  delete  tab  escape  and enter         return if  e ctrlKey or e metaKey  and code in  65  67  88    ctrl command    a  c  x          return if code in  96  105    numpad numbers         return if code in  48  57    numbers on keyboard         return if code in  35  39    35  39 - home  end  left  right         return if code in  188  190  32    comma  period  space         return if code in  44    comma  period           e returnValue   false   IE hate you         e preventDefault                keypress  e  - gt          code   if e keyCode then e keyCode else e which         return if code in  44  46  32    comma  period  space         return if code in  48  57    numbers on keyboard         e returnValue   false   IE hate you         e preventDefault       jQuery   You can get compiled Javascript here http   goo gl SbyhXN

User · Answer

The following code is something I use extensively  I found the script in a forum  but modified and expanded it to accommodate my needs    lt script type  text javascript  gt         Restrict user input in a text field        create as many regular expressions here as you need      var digitsOnly     1234567890  g      var integerOnly     0-9    g      var alphaOnly     A-Za-z  g      var usernameOnly     0-9A-Za-z   -  g       function restrictInput myfield  e  restrictionType  checkdot           if   e  var e   window event         if  e keyCode  code   e keyCode          else if  e which  code   e which          var character   String fromCharCode code               if user pressed esc    remove focus from field            if  code  27    this blur    return false                ignore if the user presses other keys            strange because code  39 is the down key AND   key               and DEL also equals           if   e ctrlKey  amp  amp  code  9  amp  amp  code  8  amp  amp  code  36  amp  amp  code  37  amp  amp  code  38  amp  amp   code  39     code  39  amp  amp  character         amp  amp  code  40                if  character match restrictionType                     if checkdot     checkdot                        return  isNaN myfield value toString     character                     else                       return true                                  else                   return false                                 lt  script gt    Different usage methods would be    lt  -- To accept only alphabets -- gt   lt input type  text  onkeypress  return restrictInput this  event  alphaOnly    gt   lt  -- To accept only numbers without dot -- gt   lt input type  text  onkeypress  return restrictInput this  event  digitsOnly    gt   lt  -- To accept only numbers and dot -- gt   lt input type  text  onkeypress  return restrictInput this  event  integerOnly    gt   lt  -- To accept only numbers and only one dot -- gt   lt input type  text  onkeypress  return restrictInput this  event  integerOnly   checkdot     gt   lt  -- To accept only characters for a username field -- gt   lt input type  text  onkeypress  return restrictInput this  event  usernameOnly    gt

User · Answer

This is something I made another time for just numbers  it will allow all the formatters as well   jQuery     input   keypress function e        var a           var k   e which       for  i   48  i  lt  58  i            a push i        if    a indexOf k  gt  0           e preventDefault           Try it  http   jsfiddle net zpg8k   As a note  you ll want to filter on submit server side as well  for sake of pasting context menu and browsers that don t support the paste event   Edit to elaborate on multiple methods  I see you re bouncing around the  accepted  answer  so I ll clear something up  You can really use any of the methods listed here  they all work  What I d personally do is use mine for live client side filtering  and then on submit and server side use RegEx as suggested by others  However  no client side by itself will be 100  effective as there is nothing stopping me from putting   document getElementById  theInput   value    Hey  letters    in the console and bypassing any clientside verification  except for polling  but I could just cancel the setInterval from the console as well   Use whichever client side solution you like  but be sure you implement something on submit and server side as well   Edit 2 -  Tim Down  Alright  per the comments I had to adjust two things I didn t think of  First  keypress instead of keydown  which has been updated  but the lack of indexOf in IE  seriously Microsoft    breaks the example above as well  Here s an alternative      input   keypress function e        var a           var k   e which       for  i   48  i  lt  58  i            a push i        if      inArray k a  gt  0           e preventDefault           New jsfiddle  http   jsfiddle net umNuB

User · Answer

shorter way and easy to understand       someID   keypress function e         var k   e which      if  k  lt   48    k  gt   58   e preventDefault

User · Answer

http   jsfiddle net PgHFp    lt html gt   lt head gt   lt title gt Test lt  title gt   lt script language  javascript  gt  function checkInput ob      var invalidChars      0-9  gi   if invalidChars test ob value                 ob value   ob value replace invalidChars                 lt  script gt   lt  head gt    lt body gt       lt input type  text  onkeyup  checkInput this    gt   lt  body gt   lt  html gt

User · Answer

This is a variation on Robert s answer that allows a single decimal point to be entered  If a decimal point has already been entered  only numbers are accepted as input   JSFiddle - decimal number input     Allow only decimal number input      decimalInput   keypress function  e        var a           var k   e which       for  i   48  i  lt  58  i        a push i           allow a max of 1 decimal point to be entered     if  this value indexOf          -1            a push 46              if    a indexOf k   gt   0   e preventDefault            span   text  KeyCode      k

User · Answer

Here is my solution  a combination of the working ones below   var checkInput   function e            if   e                e   window event                     var code   e keyCode    e which           if   e ctrlKey                   46  8  9  27  13   backspace  delete  tab  escape  and enter             if  code    8    code    13    code    9    code    27    code    46                  return true                35  39 - home  end  left  right             if  code  gt   35  amp  amp  code  lt   39                  return true                numpad numbers             if  code  gt   96  amp  amp  code  lt   105                  return true                keyboard numbers             if  isNaN parseInt String fromCharCode code   10                      e preventDefault                    return false                                  return true

User · Answer

You can do like this to accept only Numbers in text Box             function onChange event      var ckeckChars      0-9  gi     if checkChars test event target value             event target value   event target value replace ckeckChars

User · Answer

keypress function e                                    var key codes    48  49  50  51  52  53  54  55  56  57  0  8                     if      inArray e which  key codes   gt   0                        e preventDefault                                            You need Backspace and Delete keys too

User · Answer

This works in IE  Chrome AND Firefox    lt input type  text  onkeypress  return event charCode     0      d  test String fromCharCode event charCode       gt

User · Answer

My functions       input integer only   on  input   function e          this  val   this  val   replace    0-9  g                  input float only   on  input   function e        var  var     this  val   replace    0-9    g           var  aVar    var split            if  aVar length  gt  2             var    aVar 0           aVar 1                this  val  var

User · Answer

Javascript is often used on the browser client side to perform simple tasks that would otherwise require a full postback to the server  Many of those simple tasks involve processing text or characters entered into a form element on a web page  and it is often necessary to know the javascript keycode associated with a character  Here is a reference   Press a key in the text box below to see the corresponding Javascript key code    x000D   x000D          function restrictCharacters evt    x000D   x000D              evt    evt    evt   window event  x000D              var charCode    evt which    evt which   evt keyCode  x000D              if    charCode  gt    48    amp  amp   charCode  lt    57        charCode     44      x000D                  return true  x000D                x000D              else   x000D                  return false  x000D                x000D            x000D  Enter Text  x000D   lt input type  text  id  number  onkeypress  return restrictCharacters event      gt  x000D   x000D   x000D

User · Answer

this will enable the numpad inputs also    keydown function event                                            if event keyCode    8    event keyCode    46                       return true                                               if event keyCode  gt   96  amp  amp  event keyCode  lt   105                     return true                                                if isNaN parseInt String fromCharCode event keyCode  10           return false

User · Answer

I am using below in Angular to restrict character  in HTML  For Number Only   lt input  type  text   id  score    keypress    onInputChange  event   0-9      maxlength  3   class  form-control  gt     for Alphabets Only   lt input      type  text       id  state        keypress    onInputChange  event   a-zA-Z          maxlength  3       class  form-control  gt     In TypeScript   onInputChange event  any  inpPattern string   void              var input   event key           if input match inpPattern   null            event preventDefault

User · Answer

You can make changes to accept the keycode for Ctrl keys  17  18  19  20  Then your code will be like   function numbersonly e  decimal    var key  var keychar   if  window event       key   window event keyCode  else if  e       key   e which  else      return true   keychar   String fromCharCode key    if   key  null      key  0      key  8       key  9      key  13      key  27      key  17      key  18      key  19      key  20      return true       else if     0123456789   indexOf keychar   gt  -1      return true  else if  decimal  amp  amp   keychar             return true          else    return false

User · Answer

document getElementById  myinput   onkeydown   function e          if    e keyCode  gt  95  amp  amp  e keyCode  lt  106            e keyCode  gt  47  amp  amp  e keyCode  lt  58            e keyCode    8          e keyCode    9             return false

User · Answer

You can handle te event on html by introducing keypresshandler function   function keypresshandler event         var charCode   event keyCode          You condition      if  charCode    58             event preventDefault             return false

User · Answer

This is my plugin for that case     function              fn numbers   function options            this  keypress function evt             var setting     extend                     digits    8                  options             if   this  val   length  gt   setting digits - 1   amp  amp  evt which    8                 evt preventDefault                           else                if evt which  lt  48    evt which  gt  57                   if evt keyCode    8                       evt preventDefault                                                                           jQuery      Use        limin   numbers  digits 3         limax   numbers

User · Answer

Maybe you are using bootstrap  If so  this may suffice      lt input type  text  data-mask  9999999  gt     Input mask

User · Answer

Add  lt script type  text javascript  src  jquery numeric js  gt  lt  script gt  then use      element   numeric   decimal  false  negative  false

User · Answer

All of the answers are outdated  lengthy and will cause annoyance to your users  Most of them don   t even filter or allow pasted content    Instead of filtering the input  do some validation before submitting the form and then also server-side    HTML has validation included    lt input type  number  pattern   0-9    gt    This also enables the number keyboard on mobile

User · Answer

I use this       oEl keypress function ev                var sKey   String fromCharCode ev which           if   sKey match   0-9        sKey                      ev preventDefault                          The advantage is  that every key which does not provide an input to the field is still allowed  so you don t have to worry about every single special key  Even combos like CTRL   R do still work   EDIT As this is not working in Firefox I had to modify the function a little       oEl keypress function ev                var iKeyCode   ev which    ev keyCode          var aSpecialKeysForFirefox    8  9  13  27  37  38  39  40  46           var sKey   String fromCharCode iKeyCode           if  sKey         amp  amp    inArray iKeyCode  aSpecialKeysForFirefox    lt  0  amp  amp   sKey match   0-9                   ev preventDefault                        Explanation All Browsers handle jquerys keypress event differently   To make it work in FF the   inArray check is added  As firefoxs keypress-event doesn t trigger when combinations like strg tab are used  but the others do  the key match approach still adds a little value to the latter  as it enables those combinations

[javascript] Best way to restrict a text field to numbers only?

Examples related to javascript

Examples related to html

Examples related to textbox

Examples related to numbers

Examples related to textfield