在iPad上，如何通过JavaScript事件在不显示选项的情况下将焦点（focus()）设置在选择元素上？

Question

在iPad上，如何通过JavaScript事件在不显示选项的情况下将焦点（focus()）设置在选择元素上？

3

我们使用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。

- bfricke

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mfink · Accepted Answer

如何将.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>