how to cancel keydown on mobile browsers

Question

I have this which works perfectly on desktop browsers. It checks when the user presses a key in a zipcode text input field:

zip_field.addEventListener(
                    'keydown',
                    function(evt){check_zip({evt:evt, zip_field: zip_field, submit_button: submit_button})}, 
                    false
                    )

The check_zip function has this at the bottom to cancel the keypress if the user types a letter, etc.:

if(prevent_key)
{
    evt.preventDefault()
    evt.stopPropagation()
    return false;
}

On mobile browsers, the if statement is processed just like on the desktop browsers, but it still allows the character to go through. However, if I put breakpoints in and step through the code it works correctly!

I tested in Chrome and Firefox on Android and it happened on both. Is there something else I need to do on mobile to prevent/cancel the key and prevent it from appearing in the input box?

Update: I was able to test on iPhone and it is working correctly on there. So it's only broken on Android (FF, Chrome, and Samsung browser are all failing).

In order for `return false` to have an effect, replace `{check_zip(` with `{ return check_zip(`. — trincot, Oct 22 '18 at 14:06
@trincot I just tried that, and it still happens on Android. — raphael75, Oct 22 '18 at 14:47
It seems like some sort of race condition on Android because it works correctly if I put in breakpoints and step through it. But I can't figure out why no other browsers are having this issue. — raphael75, Oct 22 '18 at 14:53

raphael75 · Accepted Answer · 2018-10-23T12:52:26.323

1

Well after creating a stripped down test page, I discovered that Chrome always interprets keys pressed using the Android keyboard as keyCode 229 in the keydown event. If I plugged my phone into my computer with the USB cable, keys I pressed on my desktop keyboard used the correct keycode, but the ones on the phone's virtual keyboard were all 229. After some more research I found this:

keyCode on android is always 229

However, I can't figure out why it works if I put breakpoints in and step through it.

edited Oct 23 '18 at 12:52

answered Oct 23 '18 at 11:54

raphael75

2,982
4
29
44

You cannot cancel with `keydown`, but you can cancel with `textInput` you mentioned. – Arsenius Jul 21 '21 at 05:27

score 0 · Answer 2 · answered Oct 22 '18 at 15:26

0

The way of access to evt is wrong. evt is passed to the parameter of check_zip() in object form in your code. Then you should access like this.

function check_zip(param) {
    ...
    if (prevent_key)
    {
        param.evt.preventDefault()
        param.evt.stopPropagation()
        return false;
    }
}

answered Oct 22 '18 at 15:26

Takashi Harano

294
1
3
10

How do you know that the OP did not initialise `evt` correctly? That part of the code is not in their question... – trincot Oct 22 '18 at 15:31
I thought it from the parameter's form. But if a local variable evt is defined in this function, this shall not apply to. – Takashi Harano Oct 22 '18 at 15:42
If I console.log the event (evt) on Android browsers, it shows all the exact same things in the desktop browsers and iphone do. It behaves exactly the same way, it just doesn't prevent the key from displaying in the textbox (unless I put a breakpoint in). – raphael75 Oct 22 '18 at 17:34

how to cancel keydown on mobile browsers

2 Answers2