时间戳

首页 > 解决方案 > 防止在 Android/chrome 移动设备上输入文本键盘 [web]

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

问题描述

我有一个带有 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 中。最糟糕的是，我发现的关于这个错误的唯一提及是这个问题，当我将我的问题标记为重复时，机器人会引用它。没有答案：maxlength 属性不再起作用。

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

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

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

标签： javascriptandroidhtml

解决方案

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

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

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

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

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

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

推荐阅读