在 iPad 上，如何在不显示选项的情况下通过 Javascript 事件在选择元素上设置 focus()？
Posted
技术标签:
【中文标题】在 iPad 上，如何在不显示选项的情况下通过 Javascript 事件在选择元素上设置 focus()？【英文标题】：On an iPad, how can you set focus() on a select element via Javascript event without showing options? 【发布时间】：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 的答案。
【问题讨论】：
【参考方案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 解决方案确实可以避免显示选择的内容。尽管如此，我已经看到将焦点短暂地放在控件上，然后在多次调用代码后将其删除。我在提供的测试用例或我尝试过的更简单的用例中没有看到这种行为。以上是关于在 iPad 上，如何在不显示选项的情况下通过 Javascript 事件在选择元素上设置 focus()？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不启动 Xcode 的情况下运行 iPhone 模拟器？
iOS 9：如何在不显示系统条形音箱弹出窗口的情况下以编程方式更改音量？
我们如何在不使用 `psql` 的命令或选项的情况下显示集群中的所有数据库？ [复制]
如何在不通过 valgrind 命令选项启动 Process 的每个实例的情况下对每个实例进行 valgrind memcheck