防止在 Android/chrome 移动设备上输入文本键盘 [web]答案

【问题标题】：Prevent text keyboard input on Android/chrome mobile [web]防止在 Android/chrome 移动设备上输入文本键盘 [web]
【发布时间】：2021-05-14 06:03:18
【问题描述】：

我有一个带有 keyDown 监听器的文本区域

<textarea onKeyDown={handleKeyDown}></textarea>

还有handleKeyDown函数：

const handleKeyDown = event => event.preventDefault()

当我从 Windows PC 输入时，Chrome 版本 90.0.4430.212（官方构建）（64 位）一切正常：文本没有出现在 textarea 中。

当我在 mac 上打字时，chrome 90 也一切正常。

但是当我拿起我的 Android 手机（三星、Android 11）时，打开 Mobile Chrome (90.0.4430.210) 并开始输入，文本出现在 textarea 中。最糟糕的是，我发现的关于这个错误的唯一提及是这个question，当我的问题标记为重复时，机器人会引用它。没有答案：maxlength 属性不再起作用。

这是我试图阻止移动 chrome 输入的内容列表：

Maxlength = 0（完全没有效果）
只读（=已禁用，我需要焦点和选择）
阻止 onKeyUp、onKeyPress、onPaste、onCut、onInput

我还尝试手动将 textarea 的值设置为 ''，但如果我设置了执行此操作的侦听器，我的 textarea 会完全损坏：每次我按下键盘上的键时，它都会复制所有以前的内容。

我的问题是如何防止输入，也许有黑客或技巧？请不要将我发送到可能讨论此错误或其他问题的 android 报告论坛...

【问题讨论】：

<textarea readonly/> 禁止使用键盘，但仍允许在我的手机上进行选择。
@Keith 你能告诉我你的手机和操作系统是什么吗？
我在 Android 上使用 Chrome 并在这里测试了只读 -> w3schools.com/tags/tryit.asp?filename=tryhtml_textarea_readonly
版本。 90.0.4430.210
无论如何，我需要显示键盘，所以 readOnly 属性在这里不是一个选项。现在，我在真实文本上方放置了一个假文本区域。它隐藏了选择光标，但至少可以正常工作。

标签： javascript android html

【解决方案1】：

我会在添加事件监听器时首先检查事件是否正常工作。 Android上一定有办法处理关键事件：

<textarea id="mytextarea"></textarea>

let mytextarea = document.getElementById('mytextarea');

mytextarea.addEventListener('keydown', (event) => {
  console.log(event.code);
});

如果这不起作用；您要求破解或技巧：尝试焦点和模糊事件，然后您可以在间隔上运行清除文本区域的函数。请注意，这种阻止技巧违反了良好的用户体验约定，因此肯定应该被视为一种黑客/技巧；-)

<textarea id="mytextarea"></textarea>

let int1;

let mytextarea = document.getElementById('mytextarea');

mytextarea.addEventListener('focus', () => {
  clearInterval(int1);
  int1 = setInterval(() => {
    mytextarea.value = '';
  }, 10)
});

mytextarea.addEventListener('blur', () => {
  clearInterval(int1);
});

【讨论】：