键盘输入后Android Chrome点击不起作用答案

【问题标题】：Android Chrome click after keyboard entry not working键盘输入后Android Chrome点击不起作用
【发布时间】：2020-10-09 13:14:58
【问题描述】：

很难用简短的标题来描述这个问题，但复制这个问题非常简单：

代码示例

<input type="text" style="width: 100%; border: 1px solid #ccc; padding: 10px;"/>
<pre>
  Android Chrome:
  - Click the input field to open virtual keyboard
  - Type a character using said keybaord
  - Scroll down
  - Click the button
  
  Click is not registered :(
  Button is selected, keyboard just closes
  
  
  
  
  
  
  
</pre>
<button href="#" onclick="alert('clicked');" style="display: block; text-align: center; width: 100%; background-color: #ccc; color: #fff; padding: 10px;">click</button>

在 Codepen 上试用：https://codepen.io/klaasvanderweij/pen/VwjYQvo

说明

因此，单击输入字段以触发 Android 显示屏幕键盘。然后你输入一个字符，任何字符，这是（虽然奇怪）必填。

现在保持键盘打开/可见并滚动（向下）到屏幕区域，当您在输入字段。点击任何可点击的内容（<button>、<a>、<div onclick="..."> 等）。

预期行为：

点击已注册。

实际行为：

未注册任何点击。

我正在开发一个自动完成/提前输入/搜索下拉菜单，其中要单击的元素是动态添加的。所以一开始我以为这个问题的本质是动态添加的内容或position: absolute;元素，但这个例子表明它比我应用的场景简单得多。

我尝试过的：

使用<button>、<a>、<div onclick="...">
在document 上注册一个事件侦听器以找出所述点击的目标。目标原来是键盘输入期间可见区域中存在的底层元素（例如：<body>）

帮助

这种情况非常简单（而且可能很常见），以至于很多人都会遇到这个问题。但是，我找不到解决方案或解决方法。

我希望能够在键盘输入期间注册可见区域之外的第一次点击，例如本例中的按钮点击。有没有办法通过 JavaScript 或 CSS 或其他任何方式确保在进入后的第一次点击被拾取？

【问题讨论】：

您在寻找什么？看不懂！
@UnknownName 好点，我会更新我的帖子！
我希望您在客户端输入时需要验证输入字段...我说的对吗？
javascript 允许您验证表单[验证：输入必须是数字/字母/大写或小写字母/符号/电子邮件/等...]
@UnknownName 该问题与验证无关

标签： javascript android html google-chrome

【解决方案1】：

问题似乎在于输入元素的焦点。模糊元素可修复未注册点击的行为。

添加以下 JavaScript（在本例中）将解决问题：

document.querySelector('input').addEventListener('input', (e) => {
    e.target.blur();
    e.target.focus();
});

在输入元素中输入文本后直接执行的单击，具有在输入期间在视口中可见的目标。向下滚动并单击一个在输入期间不可见的元素，将产生一个event.target，例如<body>——在输入期间可见的单击坐标处的第一个元素。因此我怀疑这个问题是一些优化的产物（在输入过程中忽略屏幕外元素）。

【讨论】：

我也遇到了这个问题。但对我来说，当我只专注于输入时也会发生这种情况，无需输入。有趣的是，点击的按钮被触发，但点击没有。还想知道除了那篇 stackoverflow 文章之外，在网上找不到关于该问题的任何内容。
甚至无法调试。设置全局单击侦听器不会在断点处停止，但如果没有断点，它会记录 console.log？什么？焦点事件是顺便说一句。在按钮上按预期触发。
更准确地说：效果取决于输入是否有值。如果它有一个值，则无需输入任何内容即可重现它。

【解决方案2】：

我对此的看法：

因为我发现“可点击”元素上的焦点事件确实被触发了，所以我从那里手动触发了点击。

当然会有副作用，比如调用按钮的点击，即使你可能会选项卡在那里。就我而言，这是最好的妥协。

【讨论】：