Chrome Android中keydown事件preventDefault()失效问题咨询

你遇到的这个问题在Android开发里挺常见的——Android平台的浏览器（尤其是Chrome）对输入框的keydown事件处理逻辑和桌面端差异很大，直接调用e.preventDefault()经常失效。这是因为系统输入法的输入流程和原生键盘事件的传递机制不兼容，输入法注入文本的操作往往能绕过keydown的拦截。

下面给你几个可行的解决方案：

方案1：使用beforeinput事件（推荐） #

beforeinput事件会在输入内容即将插入到输入框之前触发，这个时机拦截输入的效果在Android上非常可靠，兼容性也覆盖了大部分现代浏览器。修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test Input Block</title>
</head>
<body>
<input type="text" id="test" />
<script>
const inputEl = document.getElementById("test");
inputEl.addEventListener("beforeinput", (e) => {
  e.preventDefault();
});
</script>
</body>
</html>

方案2：尝试keypress事件拦截 #

部分Android设备上，keypress事件的拦截效果比keydown更稳定，你可以把它作为备选方案：

const inputEl = document.getElementById("test");
inputEl.addEventListener("keypress", (e) => {
  e.preventDefault();
});

方案3：设置readonly属性（适用于完全禁止输入的场景） #

如果你的需求是彻底禁止输入框接收任何内容，直接设置readonly属性是最直接的方式，不需要监听任何事件：

<input type="text" id="test" readonly />

如果需要临时允许输入，还能通过JavaScript动态切换这个属性：inputEl.readOnly = false;

简单总结：beforeinput是目前解决Android输入拦截问题最靠谱的方式，它专门针对输入内容的插入动作，能有效绕过输入法的特殊处理逻辑。

内容的提问来源于stack exchange，提问作者magom001