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

Question

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

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!" 按钮时，焦点设置在控件上，短暂显示选项，然后焦点从select 控件。如果您运行在台式计算机上执行上述代码，焦点将简单地设置在 select 控件上。此外，在 iPad 上，如果您要在加载页面时将焦点设置在 JavaScript 中的 select 控件上，则焦点将简单地设置在 select 控件上。

那么，作为事件 而没有 显示选项的结果，一组应该如何关注 select 控件？

就其价值而言，我们不利用第三方库，更喜欢只使用 JavaScript.

的答案

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

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

On an iPad, how can you set focus() on a select element via Javascript event without showing options?

javascript

focus

ipad

ios