Restricting input box to numbers only, number keypad keys do not work

Question

I need your help,

The javascript coding works flawlessly and achieves the desired result, but for some reason, it does not allow the keys on the number pad to typed into the input box. Most users would type in numbers using the numlock keys on the keyboard. How can the coding be modified so as to allow the keys on the seperate number pad on the keyboard to function?

<!DOCTYPE html>
<html>
    <body>
        <div>
            <input type="text" id="rownum">
        </div>
        <script type="text/javascript">
            document.getElementById('rownum').onkeydown = function(e) {
                var key = (window.event) ? event.keyCode : event.which;
                alert(key);
                if (key == 8) { // Delete key
                    return
                }
                else {
                    if ( isNaN( String.fromCharCode(key) ) ) return false;
                }
            }
        </script>
    </body>
</html>

It "works flawlessly" yet there's a flaw? Oh, really... – Kendall Frey Sep 10 '13 at 16:48 — Kendall Frey, Sep 10 '13 at 16:48

score 0 · Answer 1 · answered Sep 10 '13 at 16:49

0

The numbers in the numberpad have different keyCodes. Other keys like delete have the same keyCode in the normal keyboard and the numberpad, but the keyCode 8 (the one you have in your code) is for backspace, not Delete.

answered Sep 10 '13 at 16:49

makmonty

465
3
12

score 0 · Answer 2 · answered Sep 10 '13 at 16:59

The sample code does not appear to be valid. I run it and get 'event is undefined'. This code works:

document.getElementById('rownum').onkeydown = function(e) {
            var key = e.keyCode || e.which; // <-- updated reference to event
            alert(key);
            if (key == 8) { // Delete key
                return
            }
            else {
                if ( isNaN( String.fromCharCode(key) ) ) return false;
            }
        };

But as @Portnoy said, you will likely need to handle different keyCodes.

score 0 · Answer 3 · answered Sep 10 '13 at 18:04

Proving that the array.indexOf(array) is supported:

Array.prototype.indexOf = function(obj, start) {
     for (var i = (start || 0), j = this.length; i < j; i++) {
         if (this[i] === obj) { return i; }
     }
     return -1;
}

then you can apply the following:

            document.getElementById('rownum').onkeydown = function(e) {

                var key = (window.event) ? event.keyCode : event.which;

                var keys = [8,37,39,46,96,97,98,99,100,101,102,103,104,105]

                var x = (keys.indexOf(key) > -1)

                if (x != true) {

                    if (isNaN(String.fromCharCode(key))) { return false }

                }
            }

Restricting input box to numbers only, number keypad keys do not work

3 Answers3