Restricting input to textbox: allowing only number

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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.');
    }
});

Answer 4

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

Answer 5

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

Answer 6

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