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:

Code example

<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>

Try it on Codepen: https://codepen.io/klaasvanderweij/pen/VwjYQvo

Description

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.

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.).

Expected behaviour:

A click is registered.

Actual behaviour:

No click is registered.

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.

What I've tried:

Using <button>, <a>, <div onclick="...">
Registering an event listener on document to 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>)

Help

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.

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?

回答1:

The issue appears to reside in the focus of the input element. Blurring the element fixes the behaviour of the unregistered click.

Adding the following JavaScript (in this example) will fix the issue:

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

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).

来源：https://stackoverflow.com/questions/64280854/android-chrome-click-after-keyboard-entry-not-working

标签

javascript

android

html

google-chrome