How to make HTML input tag only accept numerical values

Question

I need to make sure that a certain  lt input gt  field only takes numbers as value  The input is not part of a form  Hence it doesn t get submitted  so validating during submission is not an option  I want the user to be unable to type in any characters other than numbers   Is there a neat way to achieve this

User · Answer

lt input      onkeyup  value isNaN parseFloat value   1000 value          type  number         value  1000   gt    onkeyup triggers when the key is released    isNaN parseFloat value    checks if the input value is not a number    If it is not a number the value is set to 1000   If it is a number the value is set to the value   note  For some reason it only works with type  number   To make it even more exiting  you can also have a boundary    lt input      onkeyup  value isNaN parseFloat value    value lt 0  value gt 9000 1000 value         type  number        value  1000   gt    Enjoy

User · Answer

The accepted answer   function isNumberKey evt       var charCode    evt which    evt which   event keyCode     if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false      return true      It s good but not perfect  It works out for me  but i get a warning that the if-statement can be simplified   Then it looks like this  which is way prettier   function isNumberKey evt       var charCode    evt which    evt which   event keyCode      return   charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57        Would comment the original post  but my reputation is too low to do so  just created this account

User · Answer

http   www texotela co uk code jquery numeric  numeric input credits to Leo Vu for mentioning this and of course TexoTela  with a test page

User · Answer

You can also use the pattern attribute in html5    lt input type  text  name  name  pattern   0-9   title  Title    gt     Input validation tutorial  Although  if your doctype isn t html then I think you ll need to use some javascript jquery

User · Answer

Please see my project of the cross-browser filter of value of the text input element on your web page using JavaScript language  Input Key Filter   You can filter the value as an integer number  a float number  or write a custom filter  such as a phone number filter  See an example of code of input an integer number    x000D   x000D   lt  doctype html gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml   gt  x000D   lt head gt  x000D       lt title gt Input Key Filter Test lt  title gt  x000D    lt meta name  author  content  Andrej Hristoliubov anhr mail ru  gt  x000D    lt meta http-equiv  Content-Type  content  text html  charset utf-8   gt  x000D    x000D    lt  -- For compatibility of IE browser with audio element in the beep   function  x000D   https   www modern ie en-us performance how-to-use-x-ua-compatible -- gt  x000D    lt meta http-equiv  X-UA-Compatible  content  IE 9   gt  x000D    x000D    lt link rel  stylesheet  href  https   rawgit com anhr InputKeyFilter master InputKeyFilter css  type  text css  gt    x000D    lt script type  text javascript  src  https   rawgit com anhr InputKeyFilter master Common js  gt  lt  script gt  x000D    lt script type  text javascript  src  https   rawgit com anhr InputKeyFilter master InputKeyFilter js  gt  lt  script gt  x000D    x000D   lt  head gt  x000D   lt body gt  x000D    lt h1 gt Integer field lt  h1 gt  x000D   lt input id  Integer  gt  x000D   lt script gt  x000D   CreateIntFilter  Integer   function event    onChange event x000D     inputKeyFilter RemoveMyTooltip    x000D     var elementNewInteger   document getElementById  NewInteger    x000D     var integer   parseInt this value   x000D     if inputKeyFilter isNaN integer  this    x000D      elementNewInteger innerHTML       x000D      return  x000D       x000D       elementNewInteger innerText   integer   Uncompatible with FireFox x000D     elementNewInteger innerHTML   integer  x000D      x000D     x000D      onblur event  Use this function if you want set focus to the input element again if input value is NaN   empty or invalid  x000D      function event   inputKeyFilter isNaN parseInt this value   this     x000D      x000D   lt  script gt  x000D   New integer   lt span id  NewInteger  gt  lt  span gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Also see my page  Integer field   of the example of the input key filter

User · Answer

I use this for Zip Codes  quick and easy    lt input type  text  id  zip code  name  zip code  onkeypress  return event charCode  gt  47  amp  amp  event charCode  lt  58   pattern   0-9  5   required gt  lt  input gt

User · Answer

x000D   x000D  function AllowOnlyNumbers e    x000D   x000D  e    e    e   window event  x000D  var clipboardData   e clipboardData   e clipboardData   window clipboardData  x000D  var key   e keyCode   e keyCode   e which   e which   e charCode  x000D  var str    e type  amp  amp  e type     paste     clipboardData getData  Text     String fromCharCode key   x000D   x000D  return     d    test str    x000D    x000D   lt h1 gt Integer Textbox lt  h1 gt  x000D       lt input type  text  autocomplete  off  id  txtIdNum  onkeypress  return AllowOnlyNumbers event      gt  x000D   x000D   x000D    JSFiddle  https   jsfiddle net ug8pvysc

User · Answer

Simple enough    x000D   x000D  inputField addEventListener  input   function      x000D    if   inputField value inputField value      1    x000D      console log  Please enter a number    x000D      x000D      x000D   lt input id  inputField  type  text  gt  x000D   x000D   x000D

User · Answer

You can use the  lt input gt  tag with attribute type  number    For example you can use  lt input type  number    gt   This input field allows only numerical values  You can also specify the minimum value and maximum value that should be accepted by this field

User · Answer

One way could be to have an array of allowed character codes and then use the Array includes function to see if entered character is allowed    Example    lt input type  text  onkeypress  return  45  48  49  50  51  52  53  54  55  56  57  includes event charCode     gt

User · Answer

if you can use HTML5 you can do  lt input type  number    gt  If not you will have to either do it through javascript as you said it doesnt get submited to do it from codebehind    lt input id  numbersOnly  onkeypress  validate      gt   function validate      var returnString    var text   document getElementByID  numbersOnly   value    var regex     0-9         var anArray   text split        for var i 0  i lt anArray length  i        if  regex test anArray i              anArray i                   for var i 0  i lt anArray length  i          returnString    anArray i         document getElementByID  numbersOnly   value   returnString      P S didnt test the code but it should be more or less correct if not check for typos  D You might wanna add a few more things like what to do if the string is null or empty etc  Also you could make this quicker  D

User · Answer

I updated some answers posted to add the following    Add the method as extension method Allow only one point to be entered Specify how many numbers after the decimal point is allowed   String prototype isDecimal   function isDecimal evt decimalPts        debugger      var charCode    evt which    evt which   event keyCode     if  charCode  gt  31  amp  amp   charCode    46  amp  amp   charCode  lt  48    charCode  gt  57            return false         Prevent more than one point     if  charCode    46  amp  amp  this includes               return false          Restrict the needed decimal digits     if  this includes                     var number               number   this split               if  number 1  length    decimalPts               return false               return true

User · Answer

Quick and Easy Code   lt input type  text  onkeypress  return  event charCode   8  amp  amp  event charCode   0     event charCode  gt   48  amp  amp  event charCode  lt   57      gt    This will permit usage of numbers and backspace only   If you need decimal part too  use this code fragment   lt input type  text  onkeypress  return  event charCode   8  amp  amp  event charCode   0      event charCode    46     event charCode  gt   48  amp  amp  event charCode  lt   57       gt

User · Answer

I have used regular expression to replace the input value with the pattern needed    x000D   x000D  var userName   document querySelector   numberField    x000D   x000D  userName addEventListener  input   restrictNumber   x000D  function restrictNumber  e      x000D    var newValue   this value replace new RegExp     d    ig         x000D    this value   newValue  x000D    x000D     x000D   lt input type  text  id  numberField  gt  x000D   x000D   x000D

User · Answer

When using this code you cant use  BackSpace Button  in Mozilla Firefox you can only use backspace in Chrome  47  amp  amp  event charCode  lt  58   pattern   0-9  5   required

User · Answer

For general purpose  you can have JS validation as below   It will work for Numeric keypad and normal number key s   function isNumberKey evt           var charCode    evt which    evt which   event keyCode  if  charCode  lt  31     charCode  gt   48  amp  amp  charCode  lt   57       charCode  gt   96  amp  amp  charCode  lt   105            return true      return false      lt input name  someid  type  number  onkeypress  return isNumberKey event    gt

User · Answer

How about using  lt input type  number     gt    http   www w3schools com tags tag input asp  Also  here is a question that has some examples of using Javascript for validation   Update  linked to better question  thanks alexblum

User · Answer

if not integer set 0   lt input type  text  id  min-value    gt       min-value   change function                                     var checkvalue       min-value   val                    if  checkvalue    parseInt checkvalue                           min-value   val 0

User · Answer

HTML 5  You can use HTML5 input type number to restrict only number entries    lt input type  number  name  someid    gt    This will work only in HTML5 complaint browser  Make sure your html document s doctype is     lt  DOCTYPE html gt   See also https   github com jonstipe number-polyfill for transparent support in older browsers   JavaScript  Update  There is a new and very simple solution for this      It allows you to use any kind of input filter on a text  lt input gt     including various numeric filters  This will correctly handle   Copy Paste  Drag Drop  keyboard shortcuts  context menu operations    non-typeable keys  and all keyboard layouts    See this answer or try it yourself on JSFiddle   For general purpose  you can have JS validation as below   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 name  someid  type  number  onkeypress  return isNumberKey event    gt    If you want to allow decimals replace the  if condition  with this   if  charCode  gt  31  amp  amp   charCode    46  amp  amp  charCode  lt  48    charCode  gt  57      Source  HTML text input allow only numeric input  JSFiddle demo  http   jsfiddle net viralpatel nSjy7

User · Answer

You can use an  lt input type  number    gt   This will only allow numbers to be entered into othe input box   Example  http   jsfiddle net SPqY3   Please note that the input type  number  tag is only supported in newer browsers   For firefox  you can validate the input by using javascript   http   jsfiddle net VmtF5   Update 2018-03-12  Browser support is much better now it s supported by the following    Chrome 6  Firefox 29  Opera 10 1  Safari 5  Edge  Internet Explorer 10

User · Answer

Please try this code along with the input field itself   lt input type  text  name  price  id  price per ticket  class  calculator-input  onkeypress  return event charCode  gt   48  amp  amp  event charCode  lt   57  gt  lt  div gt    it will work fine

User · Answer

I fought with this one for a bit  Many solutions here and elsewhere seemed complicated  This solution uses jQuery javascript alongside HTML        lt input type  number  min  1  class  validateNumber  gt         document  on  change     validateNumber   function              var abc   parseInt   this  val             if isNaN abc     abc   1              this  val abc             In my case I was tracking small quantities with a minimum value of 1  hence the min  1  in the input tag and abc   1 in the isNaN   check  For positive only numbers you could change those values to 0 and even simply remove the min  1  from the input tag to allow for negative numbers    Also this works for multiple boxes  and could save you some load time over doing them individually by id   just add the  validateNumber  class where needed   Explanation  parseInt   basically does what you need  except that it returns NaN rather than some integer value  With a simple if   you can set the  fallback  value that you prefer in all the cases NaN is returned  -    Also W3 states here that the global version of NaN will type cast before checking which gives some extra proofing  Number isNaN   does not do that    Any values sent to a server backend should still be validated there

User · Answer

lt input type  text  name  myinput  id  myinput  onkeypress  return isNumber event      gt    and in the js   function isNumber e       e   e    window event      var charCode   e which   e which   e keyCode      return   d  test String fromCharCode charCode        or you can write it in a complicated bu useful way    lt input onkeypress  return   d  test String fromCharCode   event  window event  which   event  window event  which      type  text  name  myinput  id  myinput    gt    Note cross-browser and regex in literal

User · Answer

It s better to add     to REGEX condition in order to accept multiple digits  not only one digit     lt input type  text  name  your field  pattern   0-9    gt

User · Answer

Add inside your input tag   onkeyup  value value replace     d  g

[html] How to make HTML input tag only accept numerical values?

Examples related to html

Examples related to input

Examples related to numbers

Examples related to validating