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?

score 171 · Accepted Answer · edited Feb 01 '17 at 13:04

171

<HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
          var charCode = (evt.which) ? evt.which : evt.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
       }
       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

This really works!

edited Feb 01 '17 at 13:04

Mohammad Yusuf

16,554
10
50
78

answered May 13 '10 at 06:52

rebisco

1,790
1
10
2

1

Why is && charCode >31 needed? – contactmatt Aug 29 '12 at 21:01
2

Character 31 is the Unit Separator Code. Pretty much numbers and text are between 32 and higher. The code reads that should the character code entered is not the decimal AND is higher than 31 (Unit separator) but lower than 48 (number zero) or higher than 57 (number nine), don't accept it. – Paul Williams Nov 02 '12 at 00:24
please add a reference to source : http://www.cambiaresearch.com/articles/39/how-can-i-use-javascript-to-allow-only-numbers-to-be-entered-in-a-textbox – Bart Nov 05 '12 at 05:18
http://stackoverflow.com/questions/10023845/regex-in-javascript-for-validating-decimal-number – Abhishek Chatterjee Oct 30 '13 at 05:56
9

if (charCode == 46 && evt.srcElement.value.split('.').length>1) { return false; } It will privent multiple '.'... :) – Anish Karunakaran Nov 05 '13 at 05:01
11

include keypad numkeys and periods with: `&& charCode != 190 && charCode != 110 && (charCode > 105 || charCode < 96)` – mga Nov 27 '13 at 19:38
Back space is not working, It allows more than 2 characters after decimal place. – Bikram Pahi Nov 13 '15 at 11:05
1

it does not work when user paste string directly to the textbox – Mohammed Dawood Ansari Mar 09 '16 at 05:21
how to disable decimal dot also ? – rafalefighter Sep 25 '16 at 08:03
include "-" negative number "&& charCode != 45" – Leonardo Ciaccio Oct 07 '16 at 11:38
This fails on copy'n'paste, drag'n'drop and it disabled some important keyboard functionality like the arrow keys or `ctrl+a` for example. Take a look at my answer below for a solution that works with all that. – Hubert Grzeskowiak Feb 01 '17 at 14:08
1

it is accepting more than one '. [ period ]', which is wrong i guess. – Akshay Chawla May 01 '17 at 08:04
2

i can paste non numeric chars in this field, is there any workaround for this/ – Uday Shankar Apr 15 '19 at 04:45
Working for 435.23.23.232.....1616....but it should not take – Lets-c-codeigniter Feb 14 '22 at 11:19
I use this solution on "event listener" separate js file, but it didn't work. Anyone have idea? [link](https://jsfiddle.net/0usk37oq/) – Bariq Dharmawan Jul 28 '22 at 08:07

score 39 · Answer 2 · edited Oct 18 '19 at 12:05

39

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:

<html>

<head>
  <script type="text/javascript">
    function isNumberKey(txt, evt) {
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if (charCode == 46) {
        //Check if the text already contains the . character
        if (txt.value.indexOf('.') === -1) {
          return true;
        } else {
          return false;
        }
      } else {
        if (charCode > 31 &&
          (charCode < 48 || charCode > 57))
          return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <input type="text" onkeypress="return isNumberKey(this, event);" />
</body>

</html>

edited Oct 18 '19 at 12:05

Irf

4,285
3
36
49

answered May 06 '15 at 13:24

Hassan Mokdad

5,832
18
55
90

I used your answer but I modified this onkeypress="return isNumberKey(this,event);" – Bilbo Baggins May 28 '15 at 12:12
yes I think it is optional to type pass the event, since it works with both cases, thanks – Hassan Mokdad May 30 '15 at 05:14
saved us a few key strokes.. tq – Irf Oct 18 '19 at 12:06
3

only problem with this one is you can copy paste in text. Adding to input element `ondrop="return false;" onpaste="return false;" oncontextmenu="return false;"` seems to be enough – clamchoda Oct 23 '19 at 16:51
It's a mis-service to every user to prevent them from using drag-and-drop or copy-and-paste. – Hubert Grzeskowiak Nov 24 '19 at 23:40

score 30 · Answer 3 · edited Jan 17 '13 at 18:12

30

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.

edited Jan 17 '13 at 18:12

Norman H

2,248
24
27

answered May 11 '10 at 05:06

tau

6,499
10
37
60

1

Think this will also validate '99.23.65.86' .... But i guess the question was about validating '56987.32' with single dot..... – SpikETidE May 11 '10 at 05:23
i see the poster has since edited his/her original question. thanks for the update! – tau May 11 '10 at 05:25
1

I'd better use /^\d+([\.,]\d+)?$/ to support international numbers ( where comma is used instead of dot ) – FDIM Jan 13 '14 at 12:34

Kurenai Kunai · Answer 4 · 2018-04-02T20:20:02.683

23

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

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

  }
  return true;
}

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

edited Apr 02 '18 at 20:20

answered Jun 16 '15 at 10:52

Kurenai Kunai

1,842
2
12
22

Almost perfect.. the last condition of your `if` is missing a capitalised "C". – DNKROZ Aug 03 '17 at 12:13
Beautiful solution!! – Michael Murray Jul 16 '19 at 01:33
Beutiful. Works perfectly for me. – Noor Ahmed Oct 24 '19 at 11:48
Note that this solution allows multiple dots (`.`), dash (`-`) and the letter `e` when text is pasted or dropped onto the field. The HTML element will also show two arrows for incrementing and decrementing the number by default in Chrome. The decrementing button allows the number to fall below zero. – Hubert Grzeskowiak Nov 24 '19 at 23:38
This solution doesn't allow enter anything on the left if you already placed 2 decimal points, also you will have to handle paste. – Farhan ALi Jan 25 '21 at 10:54
Works perfectly. Thanks Mate. :) – Ashwani Shukla Oct 12 '21 at 20:32

score 17 · Answer 5 · answered Feb 01 '17 at 14:06

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.

var validNumber = new RegExp(/^\d*\.?\d*$/);
var lastValid = document.getElementById("test1").value;
function validateNumber(elem) {
  if (validNumber.test(elem.value)) {
    lastValid = elem.value;
  } else {
    elem.value = lastValid;
  }
}

<textarea id="test1" oninput="validateNumber(this);" ></textarea>

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.

This is the most elegant solution! – jkd Oct 24 '17 at 08:27 — jkd, Oct 24 '17 at 08:27

score 4 · Answer 6 · answered Jan 30 '14 at 11:43

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

lak-b · Answer 7 · 2010-05-11T05:43:15.047

Are you looking for something like this?

   <HTML>
   <HEAD>
   <SCRIPT language=Javascript>
      <!--
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }
      //-->
   </SCRIPT>
   </HEAD>
   <BODY>
      <INPUT id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar">
   </BODY>
  </HTML>

score 2 · Answer 8 · answered Feb 04 '13 at 11:57

here is script that cas help you :

<script type="text/javascript">
// 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 > 0) {
        reg0Str += '\[\,\.]?[0-9]{0,' + decimalPlaces + '}';
    } else if (decimalPlaces < 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 > 0 && 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 < 0
            var reg3Right = temp.substring(reg3Array.index + reg3Array[0].length);
            reg3Right = reg3Right.replace(reg3, '');
            reg3Right = decimalPlaces > 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 == '-' && obj.value.indexOf('-') == -1 : false;
    var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;
    var isFirstC = allowDecimal ? keychar == ',' && 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 && temp.indexOf(".")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(".")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(".")==1 && temp.indexOf("-")==0)
    {
        temp=temp.replace("-","-0") ;
    }
    if (temp.indexOf(",")==temp.length-1 && temp.indexOf(",")!=-1)
    {
        temp=temp+"00";
    }
    if (temp.indexOf(",")==0)
    {
        temp="0"+temp;
    }
    if (temp.indexOf(",")==1 && 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
</script>

<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);">

MonkeyZeus · Answer 9 · 2013-10-29T19:29:58.583

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() && remove_char === true){
            target.val(chars.join(''))
        }
    }, 0);
});

score 2 · Answer 10 · edited Jan 03 '14 at 16:21

2

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 && evt.srcElement.value.split('.').length>1) {
        return false;
    }
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

edited Jan 03 '14 at 16:21

Kishore Kumar

12,675
27
97
154

answered Nov 05 '13 at 05:03

Anish Karunakaran

987
3
17
39

this is very good. However, I would like to limit it to 2 decimal point, anyway to do that ? – nodeffect Jun 09 '15 at 07:02

score 2 · Answer 11 · answered Sep 09 '17 at 10:59

If you want it for float values,

Here is the function I am using

<HTML>

<HEAD>
  <SCRIPT language=Javascript>
    <!--
    function check(e, value) {
      //Check Charater
      var unicode = e.charCode ? e.charCode : e.keyCode;
      if (value.indexOf(".") != -1)
        if (unicode == 46) return false;
      if (unicode != 8)
        if ((unicode < 48 || unicode > 57) && unicode != 46) return false;
    }
    //-->
  </SCRIPT>
</HEAD>

<BODY>
  <INPUT id="txtChar" onkeypress="return check(event,value)" type="text" name="txtChar">
</BODY>

</HTML>

Sathish · Answer 12 · 2023-07-14T12:43:38.663

function onlyDotsAndNumbers(txt, event) {
        var charCode = (event.which) ? event.which : event.keyCode
        if (charCode == 46) {
            if (txt.value.indexOf(".") < 0)
                return true;
            else
                return false;
        }

        if (txt.value.indexOf(".") > 0) {
            var txtlen = txt.value.length;
            var dotpos = txt.value.indexOf(".");
            //Change the number here to allow more decimal points than 2
            if ((txtlen - dotpos) > 2)
                return false;
        }

        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }

<input type="text" id="txtAmount" onkeypress="return onlyDotsAndNumbers(this,event);" maxlength="12" oncopy="return false" ondrag="return false" ondrop="return false" onpaste="return false" />

Only Numbers, One decimal point, Two decimal places, No Copy Paste.

how to use comma instead of dot as decimal seperator for this solution? — Shihab Ullah, May 05 '22 at 11:44

score 1 · Answer 13 · edited Jun 19 '13 at 18:47

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;
}

score 1 · Answer 14 · answered Jun 27 '14 at 07:18

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 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        } else {
            // If the number field already has . then don't allow to enter . again.
            if (evt.target.value.search(/\./) > -1 && charCode == 46) {
                return false;
            }
            return true;
        }
    }

score 1 · Answer 15 · answered May 11 '10 at 05:30

1

inputelement.onchange= inputelement.onkeyup= function isnumber(e){
    e= window.event? e.srcElement: e.target;
    while(e.value && parseFloat(e.value)+''!= e.value){
            e.value= e.value.slice(0, -1);
    }
}

answered May 11 '10 at 05:30

kennebec

102,654
32
106
127

score 1 · Answer 16 · edited Jul 04 '16 at 17:00

1

Better solution

var checkfloats = function(event){
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

    if(event.target.value.indexOf('.') >=0 && charCode == 46)
        return false;

    return true;
}

edited Jul 04 '16 at 17:00

Allan Pereira

2,572
4
21
28

answered Jun 15 '15 at 22:23

score 1 · Answer 17 · answered Feb 26 '16 at 06:16

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:

<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')">

--Accepts--

9

9.99

--Do not accept--

9.99.99

ABC

score 1 · Answer 18 · answered Oct 23 '19 at 20:11

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;
// <input type="text"  oninput="ValidateNumber(this, true);" />
// Example Integer usage:
// <input type="text"  oninput="ValidateNumber(this, false);" />
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);
    }
}

score 1 · Answer 19 · answered Feb 21 '12 at 08:19

function integerwithdot(s, iid){
        var i;
        s = s.toString();
        for (i = 0; i < s.length; i++){
            var c;
            if (s.charAt(i) == ".") {
            } else {
                c = s.charAt(i);
            }
            if (isNaN(c)) {
                c = "";
                for(i=0;i<s.length-1;i++){
                    c += s.charAt(i);
                }
                document.getElementById(iid).value = c;
                return false;
            }
        }
        return true;
    }

score 0 · Answer 20 · edited Jul 04 '16 at 17:02

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 > 31 && (charCode < 48 || charCode > 57))
    {   
        return false; 
    }
    return true;
}

It will allow only numeric and will let you put "." for decimal.

score 0 · Answer 21 · edited Jul 04 '16 at 17:57

0

<script type="text/javascript">

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }

</script>

@Html.EditorFor(model => model.Orderids, new { id = "Orderids", Onkeypress=isNumberKey(event)})

This works fine.

edited Jul 04 '16 at 17:57

Allan Pereira

2,572
4
21
28

answered Nov 21 '13 at 12:18

banny

859
7
12

score 0 · Answer 22 · answered Jun 26 '14 at 14:59

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 && charCode > 31
            && (charCode < 48 || charCode > 57))
        $return = false;
    $val = $(evt.originalTarget).val();
    if (charCode == 46) {
        if (count_appearance($val, '.') > 0) {
            $return = false;
        }
        if ($val.length == 0) {
            $return = false;
        }
    }
    return $return;
}

Allows only this format : 123123123[.121213]

Demo here demo

score 0 · Answer 23 · answered Nov 10 '14 at 12:26

Hope it will work for you.

<input type="text" onkeypress="return chkNumeric(event)" />

<script>
    function chkNumeric(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            if (charCode == 46) { return true; }
            else { return false; }
        }
        return true;
    }
</script>

score 0 · Answer 24 · answered Aug 19 '15 at 12:39

Following code worked for me

The input box with "onkeypress" event as follows

<input type="text" onkeypress="return isNumberKey(this,event);" />

The function "isNumberKey" is as follows

function isNumberKey(txt, evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode == 46) {
    //Check if the text already contains the . character
    if (txt.value.indexOf('.') === -1) {
        return true;
    } else {
        return false;
    }
  } else {
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
  }
  return true;
}

Abhishek Gahlout · Answer 25 · 2015-09-08T08:33:32.883

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:

    <HTML>
  <HEAD>
    <SCRIPT language=Javascript>
       <!--
       function isNumberKey(evt)
       {
         var charCode = (evt.which) ? evt.which : event.keyCode;

if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
{
        return false;
}
 if (charCode == 46 && evt.srcElement.value.split('.').length>1 )
    {

        return false;

    } 

 if(evt.srcElement.selectionStart<evt.srcElement.selectionEnd)
    {
          return true;
    }

  if(evt.srcElement.value.split('.').length>1 && evt.srcElement.value.split('.')[1].length==2)
  {

     return false;
  }


    return true;
       }


       //-->
    </SCRIPT>
  </HEAD>
  <BODY>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event)" 
           type="text" name="txtChar">
  </BODY>
</HTML>

score 0 · Answer 26 · answered Sep 17 '15 at 13:38

For Decimal numbers and also allowing Negatives numbers with 2 places for decimals after the point... I modified the function to:

<input type="text" id="txtSample" onkeypress="return isNumberKey(event,this)"/>



function isNumberKey(evt, element){

        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8 || charCode == 45))
            return false;
        else {
            var len = $(element).val().length;

            // Validation Point
            var index = $(element).val().indexOf('.');
            if ((index > 0 && charCode == 46) || len == 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

            // Validating Negative sign
            index = $(element).val().indexOf('-');
            if ((index > 0 && charCode == 45) || (len > 0 && charCode == 45)) {
                return false;
            }
        }
        return true;
    }

score 0 · Answer 27 · edited Jan 06 '16 at 06:24

<input type="text" class="number_only" />    
<script>
$(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) && (charCode != 46 || $(element).val().indexOf('.') != -1) && ((charCode < 48 && charCode != 8) || charCode > 57)){
        return false;
    }
    else {
        return true;
    }
} 
</script>

http://www.encodedna.com/2013/05/enter-only-numbers-using-jquery.htm

score 0 · Answer 28 · answered Nov 19 '16 at 16:38

Best and working solution with Pure-Javascript sample Live demo : https://jsfiddle.net/manoj2010/ygkpa89o/

<script>
function removeCommas(nStr) {
    if (nStr == null || nStr == "")
        return ""; 
    return nStr.toString().replace(/,/g, "");
}

function NumbersOnly(myfield, e, dec,neg)
{        
    if (isNaN(removeCommas(myfield.value)) && myfield.value != "-") {
        return false;
    }
    var allowNegativeNumber = neg || false;
    var key;
    var keychar;

    if (window.event)
        key = window.event.keyCode;
    else if (e)
        key = e.which;
    else
        return true;
    keychar = String.fromCharCode(key);
    var srcEl = e.srcElement ? e.srcElement : e.target;    
    // control keys
    if ((key == null) || (key == 0) || (key == 8) ||
                (key == 9) || (key == 13) || (key == 27))
        return true;

    // numbers
    else if ((("0123456789").indexOf(keychar) > -1))
        return true;

    // decimal point jump
    else if (dec && (keychar == ".")) {
        //myfield.form.elements[dec].focus();
        return srcEl.value.indexOf(".") == -1;        
    }

    //allow negative numbers
    else if (allowNegativeNumber && (keychar == "-")) {    
        return (srcEl.value.length == 0 || srcEl.value == "0.00")
    }
    else
        return false;
}
</script>
<input name="txtDiscountSum" type="text" onKeyPress="return NumbersOnly(this, event,true)" />

score 0 · Answer 29 · answered Jan 12 '17 at 09:31

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 > 47 && keyCode < 58) || allowedChars.indexOf(keyCode) >= 0) {             
                        //test the string with regex, decline if doesn't fit
                        if (elem[0].value != "" && !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

score 0 · Answer 30 · answered Apr 22 '17 at 05:16

<input type="text" onkeypress="return isNumberKey(event,this)">

<script>
   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 > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }


</script>

vibs2006 · Answer 31 · 2018-02-11T14:54:06.663

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.

        
        function IsNumeric(e) {
        var IsValidationSuccessful = false;
        console.log(e.target.value);
        document.getElementById("info").innerHTML = "You just typed ''" + e.key + "''";
        //console.log("e.Key Value = "+e.key);
        switch (e.key)
         {         
             case "1":
             case "2":
             case "3":
             case "4":
             case "5":
             case "6":
             case "7":
             case "8":
             case "9":
             case "0":
             case "Backspace":             
                 IsValidationSuccessful = true;
                 break;
                 
       case "Decimal":  //Numpad Decimal in Edge Browser
             case ".":        //Numpad Decimal in Chrome and Firefox                      
             case "Del":    // Internet Explorer 11 and less Numpad Decimal 
                 if (e.target.value.indexOf(".") >= 1) //Checking if already Decimal exists
                 {
                     IsValidationSuccessful = false;
                 }
                 else
                 {
                     IsValidationSuccessful = true;
                 }
                 break;

             default:
                 IsValidationSuccessful = false;
         }
         //debugger;
         if(IsValidationSuccessful == false){
         
         document.getElementById("error").style = "display:Block";
         }else{
         document.getElementById("error").style = "display:none";
         }
         
         return IsValidationSuccessful;
        }

Numeric Value: <input type="number" id="text1" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" /><br />
    <span id="error" style="color: Red; display: none">* Input digits (0 - 9) and Decimals Only</span><br />
    <div id="info"></div>

score 0 · Answer 32 · answered Jan 29 '20 at 09:46

0

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

You can restrict values to be entered by user by specifying ASCII value range.
Example : 48 to 57 for numeric values (0 to 9)

answered Jan 29 '20 at 09:46

Shashank Pujari

159
1
7

score -1 · Answer 33 · edited Oct 21 '16 at 09:55

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 && ( e.ctrlKey || e.metaKey  ) ) ||
                    (key >= 35 && key <= 40) ||
                    (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
                    (key >= 96 && key <= 105)
            )){
        e.preventDefault();
    }

/*if theres a . count how many and if reachs 2 digits after . it blocks*/ 

    if (index > 0) {
        var CharAfterdot = (len + 1) - index;
        if (CharAfterdot > 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&& len==0){
        e.preventDefault();
        $('#value').val('0.');
    }
});

permits 2 decimals and if you add a . it adds 0. and limits to 1 . and 2 decimal — buga, Oct 20 '16 at 16:33
Some explanation for the code would be useful. Also, your comment under the answer should instead be included as part of the answer as additional explanation. — Tot Zam, Oct 20 '16 at 16:57

Restricting input to textbox: allowing only numbers and decimal point

33 Answers33

Linked

Related