0

I made a function to prevent a user from entering anything other than numbers into a field (but allows useful keys like "backspace", "enter", etc ...)

Here a jsFiddle for the example: http://jsfiddle.net/cWHRp/1/

And the javascript code:

$('input').on('keypress', function (e) {
    if (
        // Allow "backspace", "tab", "enter", "escape" and "delete"
        ($.inArray(e.keyCode, [8, 9, 13, 27, 46]) !== -1) ||
        // Allow "shift + decimal point" (= delete on numpad)
        (e.shiftKey === true && e.keyCode ==  110) ||
        // Allow "Ctrl + A" and "Ctrl + C"
        (e.ctrlKey === true && ($.inArray(e.keyCode, [65, 67]) !== -1)) ||
        // Allow "end", "home", "left arrow", "up arrow", "right arrow" and "down arrow"
        (e.keyCode >= 35 && e.keyCode <= 39) ||
        // Allow "shift + classic numbers"
        (e.shiftKey === true && e.keyCode >= 48 && e.keyCode <= 57) ||
        // Allow numbers on numpad
        (e.keyCode >= 96 && e.keyCode <= 105)
    ) {
        return;
    }
    e.preventDefault();
});

It works well, even with shift + number. But I don't know how to detect that capsLock is ON when the user is typing on the keyboard.

Have you any idea to solve this problem please?

Thank you in advance!

Baptiste D.
  • 105
  • 1
  • 11
  • I can't type any number on my laptop.. – Daniel Bejan Mar 04 '14 at 16:10
  • 4
    If you can only enter numbers, why would you care if CapsLock is on? – Matt Burland Mar 04 '14 at 16:10
  • [How do you tell if caps lock is on using JavaScript?](http://stackoverflow.com/questions/348792/how-do-you-tell-if-caps-lock-is-on-using-javascript) – ficuscr Mar 04 '14 at 16:12
  • 1
    What about - right click --> paste... – epascarello Mar 04 '14 at 16:12
  • 1
    @epascarello you just crashed 95% of Visual Basic 6 applications. – ficuscr Mar 04 '14 at 16:14
  • Answers such as http://stackoverflow.com/a/348802/1773904 suggest you *can't*. You can only do some wizardry by checking both the character code and the shift state. If shift is off and the user has entered an uppercase character, you assume it's on. – Ian Clark Mar 04 '14 at 16:15
  • 1
    AFAIK CapsLock doesn't affect numbers row, so it's irrelevant if it is on or off. However your example only works with the numpad when NumLock is on but doesn't work with the numbers row. Many users don't have the numerical keyboard (or any keyboard what so ever). – pawel Mar 04 '14 at 16:15
  • 1
    Sorry, my mistake: i'm French, with a French keyboard :) When I tape "1", it shows "&". – Baptiste D. Mar 04 '14 at 16:25
  • @user2724584: Did not know that, but [Wikipedia](http://en.wikipedia.org/wiki/Caps_lock) does indeed confirm that: *"A version of Caps lock that behaves like a traditional Shift lock does exist on certain layouts such as the French AZERTY."* A bit of internationalization I wasn't aware of. – Matt Burland Mar 04 '14 at 17:59

3 Answers3

4

Don't do this, this creates more problem than it solves. Here are some better solutions:

a) <input type="number" />

b) <input type="text" pattern="\d+" />

c) .replace(/[^\d]/g,'') in a change (or keyup) event listener

d) masked-input plugins

e) client + server-side validation (which you should use anyway)

pawel
  • 35,827
  • 7
  • 56
  • 53
3

OK, so first off as others have mentioned: why are you doing this?. @pawel has suggested some better approaches.

That said, using the KeyboardEvent.getModifierState() method, you can do the following:

$('input').on('keypress', function(e) {
  var isCapsLock = e.originalEvent.getModifierState("CapsLock");
  ...
});
Ian Clark
  • 9,237
  • 4
  • 32
  • 49
1

You could use oninput event (taking care of paste value from contextmenu) and just use a regex to match all not numeric characters:

SEE DEMO

$('input').on('input', function (e) {
    this.value = this.value.replace(/\D/g,''); 
});

You could still use onkeyup/onpaste event instead, for older browsers which don't support oninput event.

A. Wolff
  • 74,033
  • 9
  • 94
  • 155