keycode for numerics only | javascript

Question

I have this piece of code. According to keycodes here http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html

this code should work but for some reason I am getting these characters as true.

eiadfghcb.

 function validate(event) {
            var keycode =  event.keyCode; 
            if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) && (keycode < 96 || keycode > 105)) {
                return false;
            }
        }

html:

  <asp:TextBox ID="txtImp" runat="server" Height="23px" Width="80"  onkeypress="return validate(event)" onkeyup="calc()"/>

Answer 1

The following code should work for you:

function validate(event) {
    var code = event.code;

    if (typeof code !== "undefined") {
        var
            codeBeginning = code.substr(0, code.length - 1);

        if (code === "Period" || code === "NumpadDecimal" || code === "Backspace" || ((codeBeginning === "Digit" || codeBeginning === "Numpad") && !parseInt(code.substr(code.length - 1)).isNaN())) { // key pressed is one of the "."-keys, the "Backspace"-key or one of the number-keys.
            return true;
        }

        return false;
    }

    var keyCode = event.which || event.keyCode;

    if (keyCode === 8 || keyCode === 46 || (keyCode >= 48 && keyCode <= 57)) {
        return true;
    }

    return false;
}

Explanation regarding to why your code didn't work.

The first condition in your if-statement !(keycode == 8 || keycode == 46) will indeed evaluate to true when the key pressed is neither the decimal point-key or the BACKSPACE-key.

However the second and third condition will conflict with one another. This can be show by the following example:
The user presses the Numpad 2-key which (in my case) results in 50. This value does comply to the second condition as 50 is both higher than 48 and lower than 57, but it will not comply to the third condition as 50 is lower than 96.

As both the second and third condition will have to result to true and there is always one of the two that will result in false the code will never do what you intend it to do.

Disclaimer

My previous answer stated that KeyBoardEvent.keyCode is unreliable and resulted in an inability to capture the right keys on my machine.

Even though I'm now unable to reproduce this issue I would still advice you to only use KeyBoardEvent.keyCode when absolutely necessary (as the documentation of KeyBoardEvent.keyCode does state that it is implementation specific), and use KeyBoardEvent.which whenever possible.

Explaination regarding to why my code works.

As the KeyBoardEvent.keyCode relies heavily on the browser implementation thereof, I've chosen to using it as much as possible by instead using KeyBoardEvent.which.

However as both of these properties have become deprecated I've also used KeyBoardEvent.code to make sure that the solution adheres the lastest KeyBoardEvent specification.

As such my solution uses KeyBoardEvent.code when available as it isn't deprecated or implementation specific. If KeyBoardEvent.code is unavailable it uses KeyBoardEvent.which as it is more consistent that KeyBoardEvent.keyCode. And finally if KeyBoardEvent.which (as is the case in older browsers e.g. Internet Explorer 8) it will have to use KeyBoardEvent.keyCode.

Answer 2

The issue:

Take a look at your third condition:

keycode < 96 || keycode > 105 //Where keycode is NOT between 96-105

Now look at the ASCII codes for the characters you entered:

a: 97
b: 98
c: 99
d: 100
e: 101
f: 102
g: 103
h: 104

It should now be obvious why your code is failing - You've included a condition that very specifically ignores the characters you're claiming "don't work".

---

keyCode vs charCode:

When it comes to keyCode, you're going to run into some cross-browser issues. For that reason you may want to consider checking both keyCode and/or charCode, as each works in a specific set of browsers. A simple way to be sure we're getting a value that's consistent is to do something like this:

var keycode = event.keyCode || event.charCode;

In the event that event.keyCode won't work, charCode will be used instead.

---

The solution:

If you simply want to ignore the condition that I pointed out as the problem, then just remove it:

if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57)) {
    return false;
}

That being said, your question doesn't say what your desire is... at all. It simply says that what you have "doesn't work for the characters mentioned".

---

Additional info:

As a side note, I'd be remiss if I didn't point out that your code is not exactly... friendly, for lack of a better word. An elegant way of resolving this is to replace condition lists with named functions, so the purpose and result is much more discernible, like so:

Bad:

if (sunny || not raining and warm || not(cloudy and raining) || not cold) 

Good:

if (weatherIsNice(...))

---

Applied in your case it may be something like

function characterIsAllowed(keycode) {
    if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) && (keycode < 96 || keycode > 105)) {
         return true;
    } else {
        return false;
    }
}

function validate(event) {
    var keycode = event.keyCode || event.charCode;
    if (characterIsAllowed(keycode)) {
        return false;
    }
}

Or, simplified one step further...

function characterIsAllowed(keycode) {
    return (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) && (keycode < 96 || keycode > 105))
}

function validate(event) {
    var keycode = event.keyCode || event.charCode;
    return !characterIsAllowed(keycode);
}