keyPress event not firing in Android mobile

Question

I am using backbone,marionette for my Application.I used same code for both desktop and mobile but keypress not working in mobile.I made a Jsfiddle for testing.

If you open this link in mobile event not firing,If you open in desktop it's firing.How can I resolve this.

can anyone help me.

Thanks.

Check this out http://stackoverflow.com/questions/9302986/no-keypress-events-for-certain-keys-in-android-browser. The issue with android >=4.4, the browser doesn't fire `keypress` events all the time. Use `input` event, it is reliable. — aravind, Mar 19 '14 at 07:48
@aravind I tried your idea,but `keycode` not working.can you check the `http://jsfiddle.net/33Snz/14/`.getting `undefined` — user3279058, Mar 19 '14 at 08:51
Ah, my bad. Got your problem, you are trying to prevent default in case it is not a number. Your solution is correct http://stackoverflow.com/a/22499179/1304559 for that issue. But keypress event not firing is not resolved I guess :( — aravind, Mar 19 '14 at 08:57
@aravind I am facing one more problem,can you this `http://stackoverflow.com/questions/22503559/backspace-not-firing-the-keyup-event-in-android-mobile`. — user3279058, Mar 19 '14 at 10:55

score 11 · Answer 1 · edited Oct 30 '20 at 11:37

11

Chrome mobile doesn't support keypress events properly for now. There is a long standing bug for this:

https://code.google.com/p/chromium/issues/detail?id=118639

~~I believe it should be fixed in v38.~~ The bug report was closed as "won't fix".

edited Oct 30 '20 at 11:37

Flimm

136,138
45
251
267

answered Sep 13 '14 at 19:31

Quin

366
4
9

strangely, you DO get proper key codes if you hold down the ALT key (I'm using Hacker's Keyboard), although this is extremely annoying and really slows down typing. – Michael Sep 17 '14 at 03:39

score 6 · Answer 2 · edited Jul 20 '17 at 10:48

I will suggest two events on input box.

This will work on desktop webbrowser.

1) onkeypress = return isNumberKey(event);

function isNumberKey(e)
{
    var evt = e || window.event;

    if(evt) 
    { 
        var charCode = evt.keyCode || evt.which; 
    }
    else 
    { 
        return true; 
    }

    if((charCode > 47 &&  charCode < 58) || charCode == 9 || charCode == 8 || charCode ==46 || charCode ==37 || charCode==39)
    { 
        return true; 
    }

    return false;
}

This will work for mobile

2) onkeyup="numberMobile(event);"

function numberMobile(e){
    e.target.value = e.target.value.replace(/[^\d]/g,'');
    return false;
}

Apply both event on the input box and it will work.Only drawback is,It make it slow.But for now we have to live with it.

There is one issue woth this solution.Left navigation is not working.I will update more appropriate solution soon.

score 6 · Answer 3 · answered Apr 21 '19 at 15:39

6

It seems like keypress event has been deprecated (Refer to https://developer.mozilla.org/en-US/docs/Web/Events/keypress) and it is better to use keydown event now before all browser drop support on it.

answered Apr 21 '19 at 15:39

Kong

161
1
5

score 3 · Answer 4 · answered Mar 19 '14 at 07:35

3

Finally I found a problem,but it won't work in opera.Instead of writing the code for numeric fields.I just added an attribute type='number' to input field in html file.Now only numeric keypad is coming.So it satisfies my requirements.Here is the JsFiddle

html code:

<input type='number'/>

answered Mar 19 '14 at 07:35

user3279058

549
4
7
22

So have you found a solution to your problem? Can you share it? – aravind Mar 19 '14 at 07:42
Open the `jsFiddle`,it was mentioned in my answer. – user3279058 Mar 19 '14 at 07:49
I opened the one here http://jsfiddle.net/33Snz/11/. Looks like the event is commented out `//"beforeinput #search_input":"typeOfField"`. Please correct me if I am missing something – aravind Mar 19 '14 at 08:35
@aravind If you mention `type='number'`,you don't need to write any extra code.that's why I hided. – user3279058 Mar 19 '14 at 08:43
Ok, I get it.. So you have avoided the problem of handling `keypress` events. Thanks for explaining. Updating your question would help, because it sounds misleading. – aravind Mar 19 '14 at 08:48
@aravind check my previous comment(I added below my question.) – user3279058 Mar 19 '14 at 08:55

score 3 · Answer 5 · answered Jul 09 '20 at 08:46

With my experience i would like to share my knowledge,

Desktop Browsers

<input type="number">

Safari - allows Chars too (may be depends on version)
maxlength not supported.
Cursor position is unable to detect.
@keypress event detected.

<input type="text">

works as expected.

<input type="tel">

works as expected.

Android Mobile Browser (Chrome)

<input type="number">

Opens numeric keypad
@keypress event detected.
Cursor position is unable to detect.

 <input type="text">

@keypress event not even detected.
maxlength not working properly.

 <input type="tel">

@keypress event is detected.
maxlength supported.
Cursor position in input field can be detected.

Note: For detecting cursor position I used,

let caretPos = e.target.selectionStart

Let me know is there are any ways to detect cursor position in input[type="number"].

Suggestion

For Desktop browsers, use input[type="text"] to handle cases like keypress event and replace some values using cursor position.

For Android browsers, use input[type="tel"] to handle same cases mentioned above.

keyPress event not firing in Android mobile

5 Answers5

Linked