在iPad上，如何通过Javascript事件在select元素上设置focus（）而不显示选项？

Question

我们使用JavaScript来创建和显示表单，然后将焦点设置在表单上的第一个控件上，该控件恰好是一个select元素。 在具有iOS 8或iOS 9的iPad上，Chrome，Safari和Firefox将重点放在select元素上，并使用以下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的答案。

Answer 1

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

我正在我的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（）而不显示选项？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-21 23:45:41

在iPad上，如何通过Javascript事件在select元素上设置focus（）而不显示选项？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-21 23:45:41

解决方案1
1 已采纳 2016-05-21 23:45:41