So today I stumbled into another fine situation: I had an input-field in a form that would only require numbers. To prevent the user from entering numbers I created a simple JavaScript method that looked something like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * This method is fired on each keydown-event of the input field * @param e */ function checkIfKeyIsNumber(e) { if( !(e.keyCode >= 48 && e.keyCode <= 57) && // 0-9 !(e.keyCode >= 96 && e.keyCode <= 105) // numpad 0-9 // some more checking like arrows, delete, backspace, etc. ) { // This is not a valid key e.preventDefault(); } } |
This works fine.
Except for some Android phones.
Not all.
Some.
So what was going on?
keyCode 229
After some trial and error and debugging I finally discovered that in some situations on Android (and most likely other browsers as well) a different keyCode was sent: 229. But what is keyCode 229?
Well according to an interesting answer on Stack Overflow by James Newton some browsers send this keyCode to the input field as some kind of placeholder for a combined character. Take the character é for example: on most systems you can type this character by first typing a ´ (the input field will now show an underlined ´ in most cases) followed by pressing an e .
I believe that the same happens on browsers for mobile devices. I haven’t checked it thoroughly, since I first encountered this problem today, but I believe that a mobile device will send the ‘placeholder keycode’ the the input-field to say: “hey, my human is still typing something, but you better prepare for some text coming your way”.
Unfortunately, having an e.preventDefault() fired on that moment isn’t helping.
A quick fix
The quick fix I implemented now is to simply whitelist keyCode 229 to my list of allowed keyCodes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * This method is fired on each keydown-event of the input field * @param e */ function checkIfKeyIsNumber(e) { if( !(e.keyCode >= 48 && e.keyCode <= 57) && // 0-9 !(e.keyCode >= 96 && e.keyCode <= 105) // numpad 0-9 // some more checking like arrows, delete, backspace, etc. && e.keyCode != 229 // Check for the 'placeholder keyCode' ) { // This is not a valid key e.preventDefault(); } } |
I’m not sure if this is the most elegant or correct fix for this problem, but it worked for me. And as soon as it stops working (or some of you guys have a better solution that you can put in the comments) I’d be happy to update this article.
Visitors give this article an average rating of 2.5 out of 5.
How would you rate this article?
★ ★ ★ ★ ★
Not really understand your problem. You want to make sure the field only accept numbers, but isn’t é input by keycode 229?
Does this still work for you? Doesn’t work for me
Ehm, why not /^\d+$/.test(e.keyCode) ?
Well, the purpose is to only allow number chars. e.keyCode is always a number so your regex will always return true. I think you mean e.key? Might work as well.
The keycode of placeholder might not be only 229 in the android world..
I have tested three android OSs which are jellybean, kitkat and marshmallow with two differend device.
One is Samsung galaxy note 2014 edition, the other is galaxy S tab2.
In jellybean OS(4.3), no keycode placeholder found.
keycode 229 can be found on kitkat OS(4.4.X) and
finally, I found find zero(0) as a place holder for marshmallow OS(6.0).
unfortunately, I don’t have lollipop OS so I don’t know if the code exists or not.
I think the placeholder might be either 0 or 229.
Why not use in this usecase? It is supported by most ( mobile ) browsers. I am using a js script to add type=”number” only on a mobile device. You will get the numeric keyboard. On desktop however it will prevent you from typing a comma. In Holland the comma is used as the decimal separator instead of the dot.
In more recent browsers you can also choose to use a patern lik this: . More patterns can be found on http://html5pattern.com/
It seems that the HTML I include was stripped from my reply above. I wanted to say:
Why not use type=”number”
And – pattern=”[-+]?[0-9]*[.,]?[0-9]+”