键盘输入后Android Chrome单击不起作用 [英] Android Chrome click after keyboard entry not working
问题描述
很难用一个简短的标题来捕捉这个问题，但是复制这个问题是非常简单的:
It's hard to capture this problem in a short title, but replicating the issue is dead simple:
<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
Try it on Codepen: https://codepen.io/klaasvanderweij/pen/VwjYQvo
因此，单击输入字段以触发Android以显示屏幕键盘.然后您输入一个字符，任何字符，这都是(虽然很奇怪)强制性.
So click an input field to trigger Android to show the onscreen keyboard. Then you enter a character, any character, this is (albeit strangely) mandatory.
现在使键盘保持打开/可见状态，并滚动(向下)到屏幕上您在键盘上输入字符时不在可见区域的区域.输入字段.单击任何可单击的内容(< button> ，< a> ，< div onclick ="......"> 等).
Now keep the keyboard open/visible and scroll (down) to an area of the screen that was not in the visible area when you were entering a character on the input field. Click on anything clickable (<button>, <a>, <div onclick="...">, etc.).
点击被注册.
没有点击被注册.
我正在研究自动完成/预先输入/搜索下拉菜单，其中动态添加了要单击的元素.因此，起初我以为这个问题的本质在于动态添加的内容或 position:absolute; 元素，但是此示例表明，它比我所应用的场景更简单.
I am working on an autocomplete/type-ahead/search drop-down thingy, in which the elementes to be clicked are added dynamically. So at first I thought that the nature of this problem was in the dynamically added content or position: absolute; elements, but this example shows that it's way more simple than my applied scenario.
我尝试过的事情:
- 使用
< button>，< a>，< div onclick ="......"> - 在
document上注册一个事件侦听器，以找出所述点击的目标.目标原来是在键盘输入过程中出现在可见区域中的基础元素(例如:< body>)
- Using
<button>,<a>,<div onclick="..."> - Registering an event listener on
documentto figure out the target of said click. The target turns out to be an underlying element that is present in the visible area during keyboard entry (e.g.:<body>)
这种情况是如此简单(可能很常见)，以至于成千上万的人应该遇到这个问题.但是，我找不到解决方案或解决方法.
This scenario is so simple (and probably common) that tons of people should run into this problem. However, I can't find a solution or workaround.
在键盘输入过程中，我希望能够注册在可见区域之外的第一次单击，例如在此示例中单击按钮.是否可以使用JavaScript或CSS或其他任何方法来确保输入后的第一次点击被选中?
I'd like to be able to register the first click that is outside the visible area during keyboard entry, such as the click on the button in this example. Is there a way to make sure the first click after entry get's picked up, with JavaScript or CSS or anything?
推荐答案
问题似乎出在输入元素的焦点上.模糊该元素可修复未注册点击的行为.
The issue appears to reside in the focus of the input element. Blurring the element fixes the behaviour of the unregistered click.
添加以下JavaScript(在本示例中)将解决此问题:
Adding the following JavaScript (in this example) will fix the issue:
document.querySelector('input').addEventListener('input', (e) => {
e.target.blur();
e.target.focus();
});
在将文本输入到输入元素中之后直接执行的单击具有一个目标，该目标在输入期间在视口中可见.向下滚动并单击在输入过程中不可见的元素，将产生一个 event.target ，例如< body> -单击坐标处的第一个元素在输入过程中可见.因此，我怀疑这个问题是一些优化的人工产物(忽略输入过程中的屏幕外元素).
The click performed directly after entering text into the input element, has a target that was visible in the viewport during entry. Scrolling down to and clicking an element that wasn't visible during entry, will yield an event.target such as <body> -- the first element at the click coordinates that was visible during entry.
Hence I suspect that this issue is some artifact of optimization (disregarding off-screen elements during input).
这篇关于键盘输入后Android Chrome单击不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
