CODEWITHSUNDEEP
javascriptsafarikeycode
Thanh Trung
Thanh Trung

Reputation: 3804

JS Keycode is Safari mobile is the same

I want to prevent user to type only numbers in an input field. Using javascript :

var shift_on = false;
$document.on('keydown', 'input[type="number"]', function(e) {
    var c = e.keyCode;
    if (c === KEYCODE.SHIFT)
        shift_on = true;

    //number using shift
    if ((shift_on || isMobile) && c >= 48 && c <= 57)
        return true;

    if (c >= KEYCODE.NB_ZERO && c <= KEYCODE.NB_NINE
            || c === KEYCODE.BACKSPACE
            || c === KEYCODE.DEL
            || c === KEYCODE.DOT
            || c === KEYCODE.COMMA
            || c === KEYCODE.ARROW_LEFT
            || c === KEYCODE.ARROW_RIGHT
            || c === KEYCODE.SHIFT
            || c === KEYCODE.CONTROL
            || c === KEYCODE.END
            || c === KEYCODE.HOME
            || c === KEYCODE.TAB
            )
        return true;
    else
        return false;
})

It works fine on PC but if you use Safari on a mobile, pressing "&" and "7" give the same keycode=55.

So how do I know the key pressing is "&" or "7" ?

Upvotes: 2

Views: 1554

Answers (2)

Sheepy
Sheepy

Reputation: 18005

keyCode does not mean the character.

keyCode is the same for 7 and & for all borwsers, not just Safari, as they are the same physical key on a keyboard. This is also why number row 7 (55) is a different key from numpad 7 (103).

If you think this model is outdated, you are right. keyCode is legacy and deprecated.

key gives you the character.

event.key give you the character being typed. It is standard, unlike keyCode and charCode, and it supports a lot more keys. Even IE 9+ support it. But with Safari being the new IE...

var key = event.key || String.fromCharCode( event.charCode );


document.querySelector( 'input' ).addEventListener( 'keypress', function( event ) {
   if ( event.ctrlKey || event.altKey ) return; // Control shortcuts
   var key = event.key || String.fromCharCode( event.charCode ); // Safari & mobile Chrome
   if ( key.length !== 1 || key === '\x00' ) return; // Non-printable keys
   if ( key < '0' || key > '9' ) event.preventDefault(); // Stop non-numeric
});
<input placeholder='Number only'>

That snippet works ok, after we manually allow keys like Arrows, Enter, or Ctrl+V. It won't stop copy and paste or IME input, though. Can we do better?

HTML5 has numeric and phone number input.

Depending on your need, you can let HTML5 input handles it without writing any JavaScript. It is as simple as <input type='number'> or <input type='tel'>. The browser will switch to the correct keyboard type and prevent invalid input from being submitted.

<input type='number' placeholder='integer'>
<input type='number' placeholder='float' step='2'>
<input type='tel'    placeholder='tel'>

Alternatively, you may use the pattern attribute for finer control, regardless of type.

Type / pattern is user friendly, cannot be bypassed by copy and paste or IME, is pretty future proof, and is very easy to maintain. They are widely supported by all modern browsers, including the venerable IE, so please use them if you can.

Upvotes: 2

Marc DePoe
Marc DePoe

Reputation: 43

I would try using keypress event (instead of keydown) as long-pressing keys on mobile keyboards often has special meaning. Alternatively, you might try checking charCode instead of keyCode to grab the actual character:

var c = String.fromCharCode(e.which);

or

var c = e.charCode;

Upvotes: 0

Related Questions