在 iPad 上，如何在不显示选项的情况下通过 Javascript 事件在选择元素上设置 focus()？答案

【问题标题】：On an iPad, how can you set focus() on a select element via Javascript event without showing options?在 iPad 上，如何在不显示选项的情况下通过 Javascript 事件在选择元素上设置 focus()？
【发布时间】：2016-04-26 18:36:45
【问题描述】：

我们使用 JavaScript 创建并显示一个表单，然后将焦点设置在表单上的第一个控件上，它恰好是一个选择元素。在装有 iOS 8 或 iOS 9 的 iPad 上，Chrome、Safari 和 Firefox 会将焦点设置在选择元素上并且使用以下 JavaScript 代码显示选择选项：

document.getElementById("button1").onclick = function() {
  document.getElementById("selectCtrl1").focus()
};

<!DOCTYPE html>
<html>

<body>

  <div>
    <button id="button1">Click Me!</button>
  </div>

  <div>
    <select id="selectCtrl1">
      <option value=1>red</option>
      <option value=2>green</option>
      <option value=3>blue</option>
    </select>
  </div>

</body>

</html>

如果“onclick”改为“ontouchend”，当“Click Me!”按钮被按下，焦点设置在控件上，选项会短暂显示，然后焦点从选择控件中移除。如果您在台式计算机上运行上述代码，则只需将焦点设置在选择控件上。此外，在 iPad 上，如果您在页面加载时将焦点设置在 JavaScript 中的选择控件上，那么焦点将简单地设置在选择控件上。

那么，应该如何将焦点放在选择控件上作为事件的结果而不显示选项？

无论如何，我们不利用第三方库，而是更喜欢只使用 JavaScript 的答案。

【问题讨论】：

标签： javascript ios ipad focus

【解决方案1】：

如何将.focus() 调用包装在立即的setTimeout 中？

我正在我的 iPad 上进行测试，它似乎正在触发焦点，但没有显示任何初始下拉菜单。

document.getElementById("button1").onclick = function() {
  setTimeout(function() {
      document.getElementById("selectCtrl1").focus();
  },0);
};

<!DOCTYPE html>
<html>

<body>

  <div>
    <button id="button1">Click Me!</button>
  </div>

  <div>
    <select id="selectCtrl1">
      <option value=1>red</option>
      <option value=2>green</option>
      <option value=3>blue</option>
    </select>
  </div>

</body>

</html>

【讨论】：

在我们遇到的更复杂的情况下，@mfink 解决方案确实可以避免显示选择的内容。尽管如此，我已经看到将焦点短暂地放在控件上，然后在多次调用代码后将其删除。我在提供的测试用例或我尝试过的更简单的用例中没有看到这种行为。