OnKeyPress、onKeyDown、onKeyUp 事件在 Android 下的 Firefox/Chrome 中在键入字母时未触发

Posted 2023-02-21

技术标签:

【中文标题】OnKeyPress、onKeyDown、onKeyUp 事件在 Android 下的 Firefox/Chrome 中在键入字母时未触发【英文标题】：OnKeyPress, onKeyDown, onKeyUp events not fired in Firefox/Chrome under Android when typing letters 【发布时间】：2014-02-18 17:12:14 【问题描述】：

我对 android 下的 Firefox/Chrome 有疑问。

当我在输入框中输入文本时（参见下面的代码），在输入字母时不会触发 onkeypress、onkeyup 和 onkeydown 事件，但在输入“%”符号或按下空格键时会触发。

在 Android“预装”浏览器中一切正常。

另一件非常罕见的事情，如果我的光标不是最后一个字符，则行为会有所不同...如果我的光标位于文本中间，则在 Firefox 下，所有事件都会针对任何键触发。在 Chrome 事件中，onkeyup 和 onkeydown 会在按下一个键时触发两次，但不会触发 onkeypress。

我在不同的设备上进行了测试，遇到了类似的问题。

我在 Internet 上找不到任何类似的问题。以前有人遇到过这个问题吗？你是怎么解决的？

像 Amazon.com 这样的网站可以很好地自动完成，所以必须有一种解决方法......

请注意该问题在最新版本的 Firefox 和 Chrome 中消失了

非常感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>onKeyXxx event test</h1>
<input type="text" onkeydown="alert('DOWN');" onkeypress="alert('Press');" onkeyup="alert('UP');">
<hr/>
</body>
</html>

【问题讨论】：

onchange 怎么样？它应该可以工作，因为这不是 key 依赖事件。 Onchange 无济于事。我想在输入时自动选择过滤值。好的，那么setInterval 并每隔 500 毫秒定期检查新值呢？好吧，别着急，你还有 7 天的赏金，也许有人会找到更优雅的解决方案，或者能够更具体地描述你的问题 ;) 相关问题：***.com/q/14194247/2157640 【参考方案1】：

setInterval 成功了。

还不确定我将如何在 Script.aculo.us（我用于自动选择下拉菜单的库）中实现它，但我会找到方法的。

这是实现 setTimer 的解决方案示例：)

<!DOCTYPE html>
<html>
<head>
<script>
typedText="";
function checkTextChange()
    if (document.getElementById("test").value != typedText)
        typedText=document.getElementById("test").value;
        document.getElementById("output").innerHTML=typedText;
        return true;
     else 
        return false;
    

if (navigator.appVersion.indexOf("Android")>-1 && (navigator.appVersion.indexOf("Safari")==-1 || navigator.appVersion.indexOf("Chrome")>-1))
    alert("Using work around");
    var myVar = setInterval(function()checkTextChange();,200);

 </script>
</head>
<body >
<h1>onKeyXxx event test</h1>
<form>
<input type="text" name="test" id="test"  onkeydown="checkTextChange();" onkeypress="checkTextChange();" onkeyup="checkTextChange();">
</form>
<div id="output"></div>
<hr>
</body>
</html>

【讨论】：

【参考方案2】：

你不能直接发出警报跟随任何一种方式

<input type="text" onkeydown="javascript:return alert('DOWN');">

或

<input type="text" onkeydown="return myFun();">

您可以在其中定义函数并在文档中的任何位置标记。

【讨论】：

那为什么我按%键的空格，或者我在一个单词里面写的时候它会起作用？试试这个做法可能会解决你的问题，有时当你犯了小错误时java脚本会出现冲突，你试试这个会更好.. 成功了：D。至少对于 Chrome 下的 keydown 和 keyup，FF 下都是 3 个。非常感谢。现在我将不得不深入研究“真正的”代码（scriptaculous autoselect），这不仅仅是触发警报，看看我如何解决它。我会让你知道结果，但你的伎俩对给定的代码做到了。谢谢。欢迎您 ,, 现在您请将此答案标记为正确，以便其他人可以使用。

以上是关于OnKeyPress、onKeyDown、onKeyUp 事件在 Android 下的 Firefox/Chrome 中在键入字母时未触发的主要内容，如果未能解决你的问题，请参考以下文章

onkeydown-onkeypress-onkeyup

react 中 onKeyDown,onKeyUp,onKeyPress事件

仅允许onKeyPress或onKeyDown中的React中的数字

输入事件侦听器（onkeypress、onkeydown）在 Android 数字键盘中不起作用

OnKeyPress、onKeyDown、onKeyUp 事件在 Android 下的 Firefox/Chrome 中在键入字母时未触发

JavaScript 在JavaScript中仅检测onkeydown / onkeyup / onkeypress上的实际文本更改