当聚焦输入元素时，键盘在 iOS 上不显示

Question

我正在 iOS 上测试一个网页。我试图在用户按下

enter

键时允许类似选项卡的行为，因此我编写了一些代码来在发生这种情况时聚焦下一个元素。

我还有一个元素，当获得焦点时，会立即聚焦子输入元素。当我通过输入/选项卡模拟将焦点集中在父级上时，它将焦点转移到子级上，但键盘不显示。

如果我点击这个子输入，我可以让键盘显示出来。此外，如果我使用真正的选项卡按钮来聚焦父级，则当焦点委托给子输入时，键盘会显示。我已经通过检查

document.activeElement

验证了子输入确实被聚焦，当我在计算机上测试时，我可以在使用

enter

聚焦后无需任何额外的点击即可输入输入。输入也以蓝色勾勒出轮廓，因此明显集中。

最后，当下一个元素直接是输入时，不会发生此错误。我按

enter

，输入获得焦点并显示键盘。

这是 iOS 的错误吗？我已经在 Safari 和 DuckDuckGo 浏览器中进行了测试。 （我没有非 iPhone 移动设备来测试以查看这是否是一般移动设备的问题。）

Answer 1

您可以使用 setTimeout 来延迟焦点事件。这将为 iOS 提供足够的时间来注册用户操作并显示键盘。

function focusNextElement(currentElement) {
  const nextElement = currentElement.nextElementSibling;

  if (nextElement) {
    setTimeout(() => {
      nextElement.focus();
    }, 0);
  }
}

focusNextElement 是一个将当前焦点元素作为参数的函数。它找到下一个同级元素，并设置一个超时，在延迟 0 毫秒后将其聚焦&当按下 Enter 键以聚焦下一个元素时，您可以调用此函数。