Allow only numbers or decimal point in form field

Question

I've limited the input field to only numbers through js but am not sure how to also allow decimals...

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

         return true;
      }

Thank you in advance!

Answer:

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

 return true;
 }

Adding the charCode 46 worked perfectly (keypress value). 190 and 110 did nothing.

Thanks for your help all!

Answer 1

Codes depend on which event you're listening to, an easy way to find what you want is by using the JavaScript Event KeyCode Test Page here with test input, eg for a full stop (the . left of right shift) you have

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        190            46        190
event.charCode         0            46          0
event.which          190            46        190

and for the . on the numeric pad it is

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        110            46        110
event.charCode         0            46          0
event.which          110            46        110

As you can see, it is most uniform to check with onKeyPress with charCode which is it's unicode number; String.fromCharCode(46); // "." .

There is a full list on the MDN page for KeyboardEvent where it is also stated

Note : Web developers shouldn't use keycode attribute of printable keys in keydown and keyup event handlers. As described above, keycode is not usable for checking character which will be inputted especially when Shift key or AltGr key is pressed. When web developers implement shortcut key handler, keypress event is better event for that purpose on Gecko at least. See Gecko Keypress Event for the detail.

You can observe the strange effects of using AltGr or Shift on keyCode with the key of choice in the test page I linked to as well.

Answer 2

With HTML5, the input element got a new attribute: pattern . You can specify a regular expression that is validated by the browser before submitting the form.

<input type="text" pattern="([0-9]+\.)?[0-9]+" />

It is not widely supported yet , though.

The pattern attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome. ( w3schools )

Disclaimer: the expression is weak, go build a better one :)

Answer 3

Assuming you're using on key down or up:

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

     return true;
  }

110 is decimal point, 190 is period

http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Heres a fiddle with some test cases

Answer 4

<asp:TextBox ID="txt" onkeypress="return isDecimalKey(event,this)" runat="server">     


function isDecimalKey(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;
    }

In MVC

 @Html.TextBoxFor(m => m.fieldName, new { htmlAttributes = new { @class = "form- 
 control forDecimal" }})

 $(document).on("keypress", ".forDecimal", function (evt) {
       var charCode = (evt.which) ? evt.which : event.keyCode
       var value = $(this).val();

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