Restricting input to textbox allowing only numbers and decimal point

Question

How can I restrict input to a text-box so that it accepts only numbers and the decimal point

User · Answer

Here is one more solution which allows for decimal numbers and also limits the digits after decimal to 2 decimal places.

_x000D_

function isNumberKey(evt, element) {_x000D_
  var charCode = (evt.which) ? evt.which : event.keyCode_x000D_
  if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))_x000D_
    return false;_x000D_
  else {_x000D_
    var len = $(element).val().length;_x000D_
    var index = $(element).val().indexOf('.');_x000D_
    if (index > 0 && charCode == 46) {_x000D_
      return false;_x000D_
    }_x000D_
    if (index > 0) {_x000D_
      var CharAfterdot = (len + 1) - index;_x000D_
      if (CharAfterdot > 3) {_x000D_
        return false;_x000D_
      }_x000D_
    }_x000D_
_x000D_
  }_x000D_
  return true;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="number" id="rate" placeholder="Billing Rate" required onkeypress="return isNumberKey(event,this)">

_x000D_

User · Answer

A small correction to  rebisco s brilliant answer to validate the decimal perfectly   function isNumberKey evt        debugger      var charCode    evt which    evt which   event keyCode      if  charCode    46  amp  amp  evt srcElement value split      length gt 1            return false            if  charCode    46  amp  amp  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false      return true

User · Answer

here is script that cas help you     lt script type  text javascript  gt     price text-box allow numeric and allow 2 decimal points only function extractNumber obj  decimalPlaces  allowNegative        var temp   obj value          avoid changing things if already formatted correctly     var reg0Str     0-9         if  decimalPlaces  gt  0            reg0Str              0-9  0     decimalPlaces              else if  decimalPlaces  lt  0            reg0Str              0-9               reg0Str   allowNegative     -     reg0Str         reg0Str      reg0Str   reg0Str            var reg0   new RegExp reg0Str       if  reg0 test temp   return true          first replace all non numbers     var reg1Str      0-9     decimalPlaces    0                decimalPlaces    0                allowNegative    -                   var reg1   new RegExp reg1Str   g        temp   temp replace reg1            if  allowNegative               replace extra negative         var hasNegative   temp length  gt  0  amp  amp  temp charAt 0      -           var reg2    - g          temp   temp replace reg2               if  hasNegative  temp    -    temp             if  decimalPlaces    0            var reg3           g          var reg3Array   reg3 exec temp           if  reg3Array    null                   keep only first occurrence of                   and the number of places specified by decimalPlaces or the entire string if decimalPlaces  lt  0             var reg3Right   temp substring reg3Array index   reg3Array 0  length               reg3Right   reg3Right replace reg3                   reg3Right   decimalPlaces  gt  0   reg3Right substring 0  decimalPlaces    reg3Right              temp   temp substring 0 reg3Array index          reg3Right                       obj value   temp    function blockNonNumbers obj  e  allowDecimal  allowNegative        var key      var isCtrl   false      var keychar      var reg      if window event            key   e keyCode          isCtrl   window event ctrlKey           else if e which            key   e which          isCtrl   e ctrlKey             if  isNaN key   return true       keychar   String fromCharCode key           check for backspace or delete  or if Ctrl was pressed     if  key    8    isCtrl                return true             reg     d       var isFirstN   allowNegative   keychar     -   amp  amp  obj value indexOf  -      -1   false      var isFirstD   allowDecimal   keychar         amp  amp  obj value indexOf         -1   false      var isFirstC   allowDecimal   keychar         amp  amp  obj value indexOf         -1   false      return isFirstN    isFirstD    isFirstC    reg test keychar     function blockInvalid obj        var temp obj value      if temp   -                 temp                if  temp indexOf       temp length-1  amp  amp  temp indexOf       -1                temp temp  00             if  temp indexOf       0                temp  0  temp            if  temp indexOf       1  amp  amp  temp indexOf  -    0                temp temp replace  -   -0               if  temp indexOf       temp length-1  amp  amp  temp indexOf       -1                temp temp  00             if  temp indexOf       0                temp  0  temp            if  temp indexOf       1  amp  amp  temp indexOf  -    0                temp temp replace  -   -0               temp temp replace                obj value temp       end of price text-box allow numeric and allow 2 decimal points only  lt  script gt    lt input type  Text  id  id  value    onblur  extractNumber this 2 true  blockInvalid this    onkeyup  extractNumber this 2 true    onkeypress  return blockNonNumbers this  event  true  true    gt

User · Answer

Starting from  rebisco answer    function count appearance mainStr  searchFor        return  mainStr split searchFor  length - 1     function isNumberKey evt         return   true      var charCode    evt which    evt which   event keyCode      if  charCode    46  amp  amp  charCode  gt  31              amp  amp   charCode  lt  48    charCode  gt  57            return   false       val     evt originalTarget  val        if  charCode    46            if  count appearance  val        gt  0                 return   false                    if   val length    0                 return   false                      return  return      Allows only this format   123123123  121213   Demo here demo

User · Answer

alternative way to restrict input to a text-box so that it accepts only numbers and the decimal point is to  use javascript inside the html input  This works for me    lt input type  text  class  form-control  id  price  name  price  placeholder  Price   vrequired onkeyup  this value this value replace    0-9   g      replace           g    1    gt    --Accepts--  9  9 99  --Do not accept--  9 99 99  ABC

User · Answer

Just need to apply this method in Jquery and you can validate your textbox to just accept number with a decimal only   function IsFloatOnly element        var value     element  val     var regExp      d       d       return value match regExp        Please see working demo here

User · Answer

inputelement onchange  inputelement onkeyup  function isnumber e       e  window event  e srcElement  e target      while e value  amp  amp  parseFloat e value       e value               e value  e value slice 0  -1

User · Answer

Are you looking for something like this       lt HTML gt      lt HEAD gt      lt SCRIPT language Javascript gt         lt  --       function isNumberKey evt                   var charCode    evt which    evt which   event keyCode          if  charCode    46  amp  amp  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57               return false            return true                  -- gt      lt  SCRIPT gt      lt  HEAD gt      lt BODY gt         lt INPUT id  txtChar  onkeypress  return isNumberKey event   type  text  name  txtChar  gt      lt  BODY gt     lt  HTML gt

User · Answer

For anyone stumbling here like I did  here is a jQuery 1 10 2 version I wrote which is working very well for me albeit resource intensive                                                          Only allow numbers and one decimal in text boxes                                                         body   on  keydown keyup keypress change blur focus paste    input type  text     function        var target     this        var prev val   target val         setTimeout function            var chars   target val   split               var decimal exist   false          var remove char   false             each chars  function key  value               switch value                   case  0                   case  1                   case  2                   case  3                   case  4                   case  5                   case  6                   case  7                   case  8                   case  9                   case                          if value                                   if decimal exist     false                               decimal exist   true                                                    else                              remove char   true                              chars    key                                                                               break                  default                      remove char   true                      chars    key                               break                                     if prev val    target val    amp  amp  remove char     true               target val chars join                       0

User · Answer

I know that this question is very old but still we often get such requirements  There are many examples however many seems to be too verbose or complex for a simple implimentation    See this https   jsfiddle net vibs2006 rn0fvxuk  and improve it  if you can   It works on IE  Firefox  Chrome and Edge Browser    Here is the working code     x000D   x000D           x000D          function IsNumeric e    x000D          var IsValidationSuccessful   false  x000D          console log e target value   x000D          document getElementById  info   innerHTML    You just typed       e key         x000D            console log  e Key Value     e key   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                   IsValidationSuccessful   true  x000D                   break  x000D                    x000D         case  Decimal      Numpad Decimal in Edge Browser x000D               case               Numpad Decimal in Chrome and Firefox                       x000D               case  Del         Internet Explorer 11 and less Numpad Decimal  x000D                   if  e target value indexOf       gt   1    Checking if already Decimal exists x000D                     x000D                       IsValidationSuccessful   false  x000D                     x000D                   else x000D                     x000D                       IsValidationSuccessful   true  x000D                     x000D                   break  x000D   x000D               default  x000D                   IsValidationSuccessful   false  x000D             x000D             debugger  x000D           if IsValidationSuccessful    false   x000D            x000D           document getElementById  error   style    display Block   x000D            else  x000D           document getElementById  error   style    display none   x000D             x000D            x000D           return IsValidationSuccessful  x000D            x000D  Numeric Value   lt input type  number  id  text1  onkeypress  return IsNumeric event    ondrop  return false   onpaste  return false     gt  lt br   gt  x000D       lt span id  error  style  color  Red  display  none  gt   Input digits  0 - 9  and Decimals Only lt  span gt  lt br   gt  x000D       lt div id  info  gt  lt  div gt  x000D   x000D   x000D

User · Answer

document getElementById  value   addEventListener  keydown   function e        var key     e keyCode   e keyCode   e which     lenght of value to use with index to know how many numbers after         var len       value   val   length      var index       value   val   indexOf           if      8  9  13  27  46  110  190  indexOf key      -1                         key    65  amp  amp    e ctrlKey    e metaKey                              key  gt   35  amp  amp  key  lt   40                          key  gt   48  amp  amp  key  lt   57  amp  amp    e shiftKey    e altKey                           key  gt   96  amp  amp  key  lt   105                          e preventDefault             if theres a   count how many and if reachs 2 digits after   it blocks         if  index  gt  0            var CharAfterdot    len   1  - index          if  CharAfterdot  gt  3       permits the backsapce to remove  D could be improved                if    key    8                                 e preventDefault                     blocks if you try to add a new                else if   key    110                e preventDefault                 if you try to add a   and theres no digit yet it adds a 0           else if  key    110 amp  amp  len  0           e preventDefault                value   val  0

User · Answer

I observed that for all the answers provided here  the things are not working if we select some portion of the text in textbox and try to overwrite that part  So I modified the function which is as below        lt HTML gt     lt HEAD gt       lt SCRIPT language Javascript gt          lt  --        function isNumberKey evt                    var charCode    evt which    evt which   event keyCode   if  charCode    46  amp  amp  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57             return false     if  charCode    46  amp  amp  evt srcElement value split      length gt 1                  return false            if evt srcElement selectionStart lt evt srcElement selectionEnd                  return true           if evt srcElement value split      length gt 1  amp  amp  evt srcElement value split      1  length  2            return false            return true                      -- gt       lt  SCRIPT gt     lt  HEAD gt     lt BODY gt       lt INPUT id  txtChar  onkeypress  return isNumberKey event               type  text  name  txtChar  gt     lt  BODY gt   lt  HTML gt

User · Answer

The accepted solution is not complete  since you can enter multiple      for example 24    22  22  with some small modifications it will work as intended    x000D   x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt script type  text javascript  gt  x000D      function isNumberKey txt  evt    x000D        var charCode    evt which    evt which   evt keyCode  x000D        if  charCode    46    x000D            Check if the text already contains the   character x000D          if  txt value indexOf          -1    x000D            return true  x000D            else   x000D            return false  x000D            x000D          else   x000D          if  charCode  gt  31  amp  amp  x000D             charCode  lt  48    charCode  gt  57   x000D            return false  x000D          x000D        return true  x000D        x000D     lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt input type  text  onkeypress  return isNumberKey this  event      gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt HTML gt  x000D     lt HEAD gt  x000D       lt SCRIPT language Javascript gt  x000D          lt  -- x000D         function isNumberKey evt  x000D           x000D            var charCode    evt which    evt which   evt keyCode  x000D            if  charCode    46  amp  amp  charCode  gt  31  x000D               amp  amp   charCode  lt  48    charCode  gt  57   x000D               return false  x000D   x000D            return true  x000D           x000D           -- gt  x000D       lt  SCRIPT gt  x000D     lt  HEAD gt  x000D     lt BODY gt  x000D       lt INPUT id  txtChar  onkeypress  return isNumberKey event    x000D             type  text  name  txtChar  gt  x000D     lt  BODY gt  x000D   lt  HTML gt  x000D   x000D   x000D    This really works

User · Answer

function isNumberKey evt        var charCode    evt which    evt which   evt keyCode       if charCode  8    charCode  13   charCode  99   charCode  118    charCode  46                    return true               if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57                    return false             return true      It will allow only numeric and will let you put     for decimal

User · Answer

lt input type  text  onkeypress  return isNumberKey event this   gt    lt script gt     function isNumberKey evt  obj                 var charCode    evt which    evt which   event keyCode             var value   obj value              var dotcontains   value indexOf         -1              if  dotcontains                  if  charCode    46  return false              if  charCode    46  return true              if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57                   return false              return true               lt  script gt

User · Answer

Following code worked for me  The input box with  onkeypress  event as follows   lt input type  text  onkeypress  return isNumberKey this event      gt    The function  isNumberKey  is as follows   x000D   x000D  function isNumberKey txt  evt    x000D    var charCode    evt which    evt which   evt keyCode  x000D    if  charCode    46    x000D        Check if the text already contains the   character x000D      if  txt value indexOf          -1    x000D          return true  x000D        else   x000D          return false  x000D        x000D      else   x000D      if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57   x000D          return false  x000D      x000D    return true  x000D    x000D   x000D   x000D

User · Answer

lt input type  text  class  number only    gt       lt script gt    document  ready function             number only   keypress function  event            return isNumber event  this                       function isNumber evt  element        var charCode    evt which    evt which   event keyCode      if   charCode    45      element  val   indexOf  -      -1   amp  amp   charCode    46      element  val   indexOf         -1   amp  amp    charCode  lt  48  amp  amp  charCode    8     charCode  gt  57            return false            else           return true            lt  script gt    http   www encodedna com 2013 05 enter-only-numbers-using-jquery htm

User · Answer

If you want it for float values    Here is the function I am using   x000D   x000D   lt HTML gt  x000D   x000D   lt HEAD gt  x000D     lt SCRIPT language Javascript gt  x000D       lt  -- x000D      function check e  value    x000D          Check Charater x000D        var unicode   e charCode   e charCode   e keyCode  x000D        if  value indexOf         -1  x000D          if  unicode    46  return false  x000D        if  unicode    8  x000D          if   unicode  lt  48    unicode  gt  57   amp  amp  unicode    46  return false  x000D        x000D        -- gt  x000D     lt  SCRIPT gt  x000D   lt  HEAD gt  x000D   x000D   lt BODY gt  x000D     lt INPUT id  txtChar  onkeypress  return check event value   type  text  name  txtChar  gt  x000D   lt  BODY gt  x000D   x000D   lt  HTML gt  x000D   x000D   x000D

User · Answer

I chose to tackle this on the oninput event in order to handle the issue for keyboard pasting  mouse pasting and key strokes  Pass true or false to indicate decimal or integer validation   It s basically three steps in three one liners  If you don t want to truncate the decimals comment the third step  Adjustments for rounding can be made in the third step as well      Example Decimal usage      lt input type  text   oninput  ValidateNumber this  true      gt     Example Integer usage      lt input type  text   oninput  ValidateNumber this  false      gt  function ValidateNumber elm  isDecimal        try               For integers  replace everything except for numbers with blanks          if   isDecimal               elm value   elm value replace    0-9  g                else                  1  For decimals  replace everything except for numbers and periods with blanks                 2  Then we ll remove all leading ocurrences  duplicate  periods                3  Then we ll chop off anything after two decimal places                  1  replace everything except for numbers and periods with blanks              elm value   elm value replace    0-9   g                      2  remove all leading ocurrences  duplicate  periods             elm value   elm value replace             g                       3  chop off anything after two decimal places                 In comparison to lengh  our index is behind one count  then we add two for our decimal places              var decimalIndex   elm value indexOf                   if  decimalIndex    -1    elm value   elm value substr 0  decimalIndex   3                         catch  err            alert  ValidateNumber     err

User · Answer

Hope it will work for you    lt input type  text  onkeypress  return chkNumeric event     gt    lt script gt      function chkNumeric evt            evt    evt    evt   window event          var charCode    evt which    evt which   evt keyCode          if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57                 if  charCode    46    return true                else   return false                      return true         lt  script gt

User · Answer

Suppose your textbox field name is Income Call this validate method when you need to validate your field   function validate         var currency   document getElementById  Income   value        var pattern      1-9  d       d 0 2            if  pattern test currency             alert  Currency is in valid format            return true                 alert  Currency is not in valid format Enter in 00 00 format            return false

User · Answer

Best and working solution with Pure-Javascript sample Live demo   https   jsfiddle net manoj2010 ygkpa89o   x000D   x000D   lt script gt  x000D  function removeCommas nStr    x000D      if  nStr    null    nStr        x000D          return      x000D      return nStr toString   replace    g       x000D    x000D   x000D  function NumbersOnly myfield  e  dec neg  x000D            x000D      if  isNaN removeCommas myfield value    amp  amp  myfield value     -     x000D          return false  x000D        x000D      var allowNegativeNumber   neg    false  x000D      var key  x000D      var keychar  x000D   x000D      if  window event  x000D          key   window event keyCode  x000D      else if  e  x000D          key   e which  x000D      else x000D          return true  x000D      keychar   String fromCharCode key   x000D      var srcEl   e srcElement   e srcElement   e target      x000D         control keys x000D      if   key    null      key    0      key    8     x000D                   key    9      key    13      key    27   x000D          return true  x000D   x000D         numbers x000D      else if     0123456789   indexOf keychar   gt  -1   x000D          return true  x000D   x000D         decimal point jump x000D      else if  dec  amp  amp   keychar            x000D            myfield form elements dec  focus    x000D          return srcEl value indexOf         -1          x000D        x000D   x000D        allow negative numbers x000D      else if  allowNegativeNumber  amp  amp   keychar     -          x000D          return  srcEl value length    0    srcEl value     0 00   x000D        x000D      else x000D          return false  x000D    x000D   lt  script gt  x000D   lt input name  txtDiscountSum  type  text  onKeyPress  return NumbersOnly this  event true     gt   x000D   x000D   x000D

User · Answer

For Decimal numbers and also allowing Negatives numbers with 2 places for decimals after the point    I modified the function to    lt input type  text  id  txtSample  onkeypress  return isNumberKey event this    gt     function isNumberKey evt  element            var charCode    evt which    evt which   event keyCode         if  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57   amp  amp    charCode    46    charCode    8    charCode    45               return false          else               var len     element  val   length                  Validation Point             var index     element  val   indexOf                   if   index  gt  0  amp  amp  charCode    46     len    0  amp  amp  charCode    46                    return false                            if  index  gt  0                    var CharAfterdot    len   1  - index                  if  CharAfterdot  gt  3                        return false                                                  Validating Negative sign             index     element  val   indexOf  -                if   index  gt  0  amp  amp  charCode    45      len  gt  0  amp  amp  charCode    45                     return false                                  return true

User · Answer

All solutions presented here are using single key events  This is very error prone since input can be also given using copy n paste or drag n drop  Also some of the solutions restrict the usage of non-character keys like ctrl c  Pos1 etc   I suggest rather than checking every key press you check whether the result is valid in respect to your expectations    x000D   x000D  var validNumber   new RegExp    d     d      x000D  var lastValid   document getElementById  test1   value  x000D  function validateNumber elem    x000D    if  validNumber test elem value     x000D      lastValid   elem value  x000D      else   x000D      elem value   lastValid  x000D      x000D    x000D   lt textarea id  test1  oninput  validateNumber this     gt  lt  textarea gt  x000D   x000D   x000D    The oninput event is triggered just after something was changed in the text area and before being rendered   You can extend the RegEx to whatever number format you want to accept  This is far more maintainable and extendible than checking for single key presses

User · Answer

Working on the issue myself  and that s what I ve got so far  This more or less works  but it s impossible to add minus afterwards due to the new value check  Also doesn t allow comma as a thousand separator  only decimal   It s not perfect  but might give some ideas    app directive  isNumber   function                  return function  scope  elem  attrs                    elem bind  keypress   function  evt                        var keyCode    evt which    evt which   event keyCode                      var testValue    elem 0  value   String fromCharCode keyCode     0   replace    g         check ignores spaces                     var regex      -  d          d                                                   var allowedChars    8 9 13 27 32 37 39 44 45  46    control keys and separators                                    allows numbers  separators and controll keys and rejects others                     if   keyCode  gt  47  amp  amp  keyCode  lt  58     allowedChars indexOf keyCode   gt   0                                           test the string with regex  decline if doesn t fit                         if  elem 0  value        amp  amp   regex test testValue                                 event preventDefault                                return false                                                    return true                                            event preventDefault                        return false                                                   Allows    11 11  245  in controller formatted on blur to 1111 245   11 44   -123 123  -1 014  0123  formatted on blur to 123   doesn t allow            abc  11 11 1  11 11 1   42

User · Answer

lt input type  text  onkeypress  return event charCode  gt   48  amp  amp  event charCode  lt   57  gt    You can restrict values to be entered by user by specifying ASCII value range  Example   48 to 57 for numeric values  0 to 9

User · Answer

function integerwithdot s  iid           var i          s   s toString            for  i   0  i  lt  s length  i                 var c              if  s charAt i                          else                   c   s charAt i                             if  isNaN c                     c                       for i 0 i lt s length-1 i                         c    s charAt i                                     document getElementById iid  value   c                  return false                                  return true

User · Answer

form onsubmit   function        return textarea value match    d     d            Is this what you re looking for   I hope it helps   EDIT  I edited my example above so that there can only be one period  preceded by at least one digit and followed by at least one digit

User · Answer

lt script type  text javascript  gt       function isNumberKey evt            var charCode    evt which    evt which   event keyCode          if  charCode    46  amp  amp  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57               return false           return true          lt  script gt       Html EditorFor model   gt  model Orderids  new   id    Orderids   Onkeypress isNumberKey event      This works fine

User · Answer

Extending the  rebisco s answer  this below code will allow only numbers and single     period  in the text box   function isNumberKey evt            var charCode    evt which    evt which   event keyCode          if  charCode    46  amp  amp  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57                 return false            else                  If the number field already has   then don t allow to enter   again              if  evt target value search        gt  -1  amp  amp  charCode    46                    return false                            return true

User · Answer

Better solution  var checkfloats   function event       var charCode    event which    event which   event keyCode      if  charCode    46  amp  amp  charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57           return false       if event target value indexOf       gt  0  amp  amp  charCode    46          return false       return true

[javascript] Restricting input to textbox: allowing only numbers and decimal point

Examples related to javascript

Examples related to html