Android 手机无法触发 keyPress 事件

Question

我正在使用backbone和marionette框架开发我的应用程序。我将相同的代码用于桌面和移动端，但是在移动端中键盘事件不起作用。我制作了一个Jsfiddle测试链接 (http://jsfiddle.net/33Snz/3/)。

如果您在移动设备上打开此链接，则事件不会触发；如果在桌面上打开，则会触发。请问如何解决这个问题？有人可以帮帮我吗？谢谢！

- user3279058

---

安卓版本是多少？大于等于4.4吗？ - aravind

@aravind 我使用版本为“4.4.2”的Motorola Moto G手机。 - user3279058

看这个 https://dev59.com/jmox5IYBdhLWcg3wSCfk。问题出在 Android >=4.4，浏览器不总是触发 keypress 事件。使用 input 事件，它更可靠。 - aravind

@aravind 我尝试了你的想法，但是 keycode 没有起作用。你能检查一下这个链接 http://jsfiddle.net/33Snz/14/ 吗？我得到了 undefined。 - user3279058

啊，我的错。我明白你的问题了，你试图在不是数字的情况下阻止默认行为。你提供的解决方案对于这个问题是正确的https://dev59.com/5GEh5IYBdhLWcg3wYSnt#22499179。但是，我想按键事件没有被触发仍然没有解决:( - aravind

@aravind 我又遇到了一个问题，你能看一下这个链接吗：https://dev59.com/WX3aa4cB1Zd3GeqPhsWp。 - user3279058

Answer 1

目前，Chrome移动版无法正确支持keypress事件。这是一个长期存在的错误：

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

我认为它应该在v38中得到修复。但是该错误报告已被关闭，标记为“不会修复”。

- Quin

---

奇怪的是，如果你按住ALT键（我使用的是Hacker's Keyboard），你会得到正确的键码，尽管这非常烦人，而且会减慢打字速度。 - Michael

Answer 2

看起来keypress事件已被弃用（请参考https://developer.mozilla.org/en-US/docs/Web/Events/keypress），现在最好使用keydown事件，在所有浏览器都停止支持之前。

- Kong

Answer 3

我建议在输入框上添加两个事件。

这将适用于桌面Web浏览器。

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;
}

这将适用于移动设备

2) onkeyup="numberMobile(event);"

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

在输入框上应用两个事件，它就会起作用。唯一的缺点是它会使其变慢。但目前我们必须忍受它。

这个解决方案存在一个问题，左侧导航不起作用。我会尽快更新更合适的解决方案。

- Innovation

Answer 4

最后我找到了一个问题，但它在Opera浏览器中不起作用。与其编写数字字段的代码，我只需在html文件中将属性type='number'添加到输入字段中即可。现在只有数字键盘出现了。因此，它满足我的要求。这是JsFiddle

HTML代码：

<input type='number'/>

- user3279058

---

你解决了你的问题吗？能分享一下吗？ - aravind

打开 jsFiddle，它在我的回答中提到了。 - user3279058

我打开了这里的一个 http://jsfiddle.net/33Snz/11/ 。看起来事件被注释掉了 //"beforeinput #search_input":"typeOfField"。如果我理解有误，请纠正我。 - aravind

@aravind 如果你提到 type='number'，你就不需要编写任何额外的代码。这就是我隐藏的原因。 - user3279058

好的，我明白了。所以你避免了处理“keypress”事件的问题。谢谢你的解释。更新你的问题会有帮助，因为它听起来有误导性。 - aravind

@aravind，请查看我的先前评论（我已在我的问题下方添加了评论）。 - user3279058

Answer 5

With my experience, I would like to share my knowledge.

Desktop Browsers.

<input type="number">

1. Safari - 也允许输入字符（可能取决于版本）
2. 不支持 maxlength 属性。
3. 无法检测光标位置。
4. 检测到 @keypress 事件。

---

<input type="text">

1. 正如预期的那样工作。

---

<input type="tel">

1. 按预期运行。

---

安卓移动浏览器（Chrome）

<input type="number">

1. 打开数字键盘
2. 检测到@keypress事件。
3. 无法检测光标位置。

---

 <input type="text">

1. @keypress事件没有被检测到。
2. maxlength属性无法正常工作。

---

 <input type="tel">

1. 检测到@keypress事件。
2. 支持最大长度。
3. 可以检测输入字段中的光标位置。

---

注意：为了检测光标位置，我使用了以下代码：

let caretPos = e.target.selectionStart

请问有没有办法检测中光标的位置。

---

建议

对于桌面浏览器，使用 input[type="text"] 来处理像按键事件这样的情况，并使用光标位置替换一些值。

对于 Android 浏览器，使用 input[type="tel"] 来处理上述相同的情况。

- vaasav kumar

Answer 6

在 BrowserStack 上进行了测试。对我来说似乎很正常。 这是您的代码片段链接：

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

请告诉我您在测试的具体安卓设备和浏览器。

- Ahmed Abbas

---

我正在使用 摩托罗拉 Motog 手机和浏览器 Google Chrome。 - user3279058