当未通过单击激活时，.focus() 在 Chrome 移动设备上不起作用。解决方法？

Question

我在 Chrome、移动设备上遇到了一些奇怪的功能。

当我尝试将焦点集中在 chrome 上的某个元素上时，当您尝试仅加载输入、 getItById 并执行 .focus() 时，它不起作用。但是，如果将其包装在附加到按钮的事件侦听器中，并用鼠标单击该按钮，则它可以正常工作。

因此，我试图通过查看是否可以调用 btn.click() 来欺骗它，但这不会激活 .focus()

尝试一下：在移动设备、chrome（至少对于 iOS）上加载页面。您应该收到“已单击”警报，但它不会关注输入。然后，尝试单击该按钮。您将收到警报并且焦点有效。

我发现这很有趣，想看看人们是否知道解决方法。

链接在这里 - jsfiddle

const btn = document.getElementById('button')

btn.addEventListener('click', () => {
  alert('clicked')
  const input = document.getElementById('input')
  input.focus()
})

btn.click()

<input id="input" type="text">
<button id="button">Button</button>

编辑

我注意到的另一件事是，如果您让手机进入睡眠状态，然后再次打开它，则 focus() 无需单击即可工作。

编辑 2 - 添加了移动设备链接

Answer 1

为什么会出现这种情况？

由于移动设备通常需要在显示键盘时更改屏幕尺寸，因此它们对何时触发焦点事件有一些限制。这是有意限制触摸设备上的浏览器行为，以保证良好的用户体验并避免调整浏览器窗口大小的性能问题（=可能非常昂贵的样式重新计算）。

这些限制的程度存在一些跨浏览器差异，并且某些浏览器还存在错误。

但总的来说，它们都需要在以编程方式触发焦点之前不久发生实际的用户交互。使用btn.click()与实际的触摸事件不同，因此浏览器会忽略它，因为最近没有触摸事件。

关于Webkit 的这种行为的跟踪问题，Apple 提供了一个动机：

我们（Apple）喜欢当前的行为，并且当您没有连接硬件键盘并且未调用编程焦点来响应用户手势时，不希望编程焦点调出键盘。为什么您可能会问...因为自动调出软件键盘可能会被视为烦人且会分散用户的注意力（不是针对您的客户，而是针对不使用您的应用程序的每个人），因为：

1. 我们调出键盘，它占用了屏幕上宝贵的空间。
2. 当我们打算调出软件键盘时，我们会缩放和滚动页面，以提供令人愉悦的输入体验（或者至少我们希望它令人愉悦；如果不是，请提交错误）。

autoplay属性的类似问题也需要最近发生的手势（或页面加载），可能有助于理解此类问题。

如何解决这些限制？

大多数时候

您可能不需要这样做，因为大多数会触发焦点的代码都是作为对用户操作的响应而运行的，并且将被允许触发焦点。我还没有找到关于时间窗口有多大的数据，但我想它足够大，在正常情况下这不是问题（当然除非你设置超时）。

这些情况下的一个可能的问题是脚本运行时间太长，以至于事件在很久以前就已经被考虑了。事实上，这就是相关自动播放问题中发生的情况，其中代码会请求一些网络资源，并且只有在响应之后才会触发视频播放。根据网络/设备的速度，视频有时会自动播放，有时不会。

从技术上讲，仅在网络延迟后才聚焦的输入可能会发生同样的情况，从而使其不显示键盘。只要您的代码不执行任何网络请求，您就不会遇到此类问题。

页面加载时

这绝对不是问题的“修复”，但您可以通过使用专门为其设计的属性来尽最大努力来管理页面加载的焦点。这仍然不会使键盘出现，否则不会出现。

所有浏览器至少部分支持该autofocus属性。

也许只是focus()在页面加载时直接在脚本中调用就可以了，但是在页面开始显示后，该代码也有可能运行太长时间，尤其是在速度较慢的设备上。当以编程方式添加带有属性的 HTML 时（例如 React），也可能会发生这种情况autofocus。如果初始 HTML 包含autofocus不应出现在右侧元素上的属性。

Answer 2

在移动设备上，您将需要使用touchstart事件而不是单击事件。
你可以在这里找到它。希望这可以帮助。