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.

Brott

What is the Android version? >=4.4? – Exhibit

@Exhibit I am using motorola moto g with version 4.4.2 – Brott

Check this out #9303486. The issue with android >=4.4, the browser doesn't fire keypress events all the time. Use input event, it is reliable. – Exhibit

@Exhibit I tried your idea,but keycode not working.can you check the http://jsfiddle.net/33Snz/14/.getting undefined – Brott

Ah, my bad. Got your problem, you are trying to prevent default in case it is not a number. Your solution is correct https://mcmap.net/q/635701/-keypress-event-not-firing-in-android-mobile for that issue. But keypress event not firing is not resolved I guess :( – Exhibit

@Exhibit I am facing one more problem,can you this http://stackoverflow.com/questions/22503559/backspace-not-firing-the-keyup-event-in-android-mobile. – Brott

Answer 1

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".

Expectorant

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. – Chantellechanter

Answer 2

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.

Lipoma

Answer 3

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.

Autocephalous

Answer 4

With my experience i would like to share my knowledge,

Desktop Browsers

<input type="number">

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

---

<input type="text">

1. works as expected.

---

<input type="tel">

1. works as expected.

---

Android Mobile Browser (Chrome)

<input type="number">

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

---

 <input type="text">

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

---

 <input type="tel">

1. @keypress event is detected.
2. maxlength supported.
3. 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.

Lou

Answer 5

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'/>

Brott

So have you found a solution to your problem? Can you share it? – Exhibit

Open the jsFiddle,it was mentioned in my answer. – Brott

I opened the one here jsfiddle.net/33Snz/11. Looks like the event is commented out //"beforeinput #search_input":"typeOfField". Please correct me if I am missing something – Exhibit

@Exhibit If you mention type='number',you don't need to write any extra code.that's why I hided. – Brott

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. – Exhibit

@Exhibit check my previous comment(I added below my question.) – Brott