Allow Only Numbers Or Decimal Point In Form Field

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.wh

Solution 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, e.g. for a full stop (the . left of right shift) you have

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        19046190event.charCode         0460event.which          19046190

and for the . on the numeric pad it is

               onKeyDown    onKeyPress    onKeyUp
event.keyCode        11046110event.charCode         0460event.which          11046110

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.

Solution 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.

<inputtype="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 :)

Solution 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)))
        returnfalse;

     returntrue;
  }

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

Solution 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) returnfalse;
       if (charCode == 46) returntrue;
       if (charCode > 31 && (charCode < 48 || charCode > 57))
           returnfalse;
    }

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