在 Android 手机中未触发 keyPress 事件答案

【问题标题】：keyPress event not firing in Android mobile在 Android 手机中未触发 keyPress 事件
【发布时间】：2014-03-18 08:30:15
【问题描述】：

我在我的应用程序中使用backbone,marionette。我为desktop and mobile 使用了相同的代码，但keypress 在mobile 中不起作用。我为测试创建了一个Jsfiddle。

如果您在mobile 中打开此链接，则事件未触发，如果您在desktop 中打开，则会触发。我该如何解决此问题。

谁能帮帮我。

谢谢。

【问题讨论】：

什么是安卓版本？ >=4.4?
@aravind 我使用的是motorola moto g，版本为4.4.2
查看stackoverflow.com/questions/9302986/…。 android >=4.4 的问题，浏览器不会一直触发keypress 事件。使用input事件，可靠。
@aravind 我试过你的想法，但是keycode 不起作用。你能检查一下http://jsfiddle.net/33Snz/14/.getting undefined
啊，我的错。有你的问题，你试图防止默认，以防它不是一个数字。对于该问题，您的解决方案是正确的stackoverflow.com/a/22499179/1304559。但是我猜keypress事件没有触发没有解决:(

标签： javascript android backbone.js marionette

【解决方案1】：

Chrome 移动版目前不正确支持按键事件。这是一个长期存在的错误：

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

~~我认为它应该在 v38 中修复。~~错误报告已关闭为“不会修复”。

【讨论】：

奇怪的是，如果您按住 ALT 键（我使用的是黑客键盘），您会得到正确的键码，尽管这非常烦人并且确实会减慢打字速度。

【解决方案2】：

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

这将适用于桌面网络浏览器。

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

最后我发现了一个问题，但是在opera中不行.所以它满足我的要求。这是JsFiddle

html代码：

<input type='number'/>

【讨论】：

那么您找到解决问题的方法了吗？可以分享一下吗？
打开jsFiddle，我的回答中提到了。
我在这里打开了jsfiddle.net/33Snz/11。看起来该事件已被注释掉 //"beforeinput #search_input":"typeOfField"。如果我遗漏了什么，请纠正我
@aravind 如果你提到type='number'，你不需要写任何额外的代码。这就是我隐藏的原因。
好的，我明白了。所以你避免了处理keypress事件的问题。谢谢你的解释。更新您的问题会有所帮助，因为这听起来具有误导性。

【解决方案5】：

在浏览器堆栈上测试。似乎对我有用。这是您的要点的链接：

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

你能告诉我你测试的是什么特定的安卓设备和浏览器吗？

【讨论】：

我正在使用motorola motog和浏览器google chrome。

【解决方案6】：

根据我的经验，我想分享我的知识，

桌面浏览器

<input type="number">

Safari - 也允许使用字符（可能取决于版本）
不支持最大长度。
无法检测光标位置。
检测到@keypress 事件。

<input type="text">

按预期工作。

<input type="tel">

按预期工作。

Android 移动浏览器 (Chrome)

<input type="number">

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

 <input type="text">

甚至没有检测到@keypress 事件。
maxlength 无法正常工作。

 <input type="tel">

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

注意： 为了检测我使用的光标位置，

let caretPos = e.target.selectionStart

让我知道是否有任何方法可以检测 input[type="number"] 中的光标位置。

建议

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

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

【讨论】：