keyPress 事件未在 Android 手机中触发

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.

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

Answer 2

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.

Answer 3

似乎keypress事件已被弃用（请参阅https://developer.mozilla.org/en-US/docs/Web/Events/keypress ），最好在所有浏览器放弃支持之前使用keydown事件。

Answer 4

Tested on browserstack. Seems to be working to me. Here's a link to your gist:

http://www.browserstack.com/start#os=android&os_version=4.1&device=Samsung+Galaxy+S+III&zoom_to_fit=true&full_screen=true&url=http%3A%2F%2Fjsfiddle.net%2F33Snz%2F3%2Fembedded%2Fresult%2F&speed=1&start=true

Can you let know what specific andriod device and browser you testing in.

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

Answer 6

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.