iOS上的JavaScript:打开HTML select元素

Question

我没有希望,但我会问以防万一.

我希望能够使用JavaScript在iPhone/iPad的移动Safari中打开一个选择元素.

广泛的Google/Stack Overflow搜索显示很多人希望能够在浏览器中执行此操作,但不支持(为什么不呢,我想知道？).已经提出了各种黑客攻击,从调用focus()select元素并更改其size属性以使更多option元素可见,或构造带有<div>和<ul>元素的完全模拟选择元素.但是,我想在iPad和iPhone中使用本机浏览器选择控件.

我想知道,也许有人可能知道专有的Apple WebKit方法来做到这一点.它会是这样的:

var myselect = document.getElementsByTagName("select")[0];
myselect.open(); // this method doesn't exist

作为奖励,知道一个布尔属性也很方便,该属性说明select元素当前是否打开/活动(即不仅仅是元素是否具有焦点).我知道我可以通过跟踪点击和更改事件来解决这个问题,但是一个简单的属性会很有用.

妄想？

---

更新:
我还没有答案,但我发现模拟mousedown成功打开谷歌浏览器中的选择元素,但不是iPad或Firefox等等:

function simulateMouseEvent(eventName, element) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent(eventName, true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  element.dispatchEvent(evt);
}

simulateMouseEvent("mousedown", select);

更新:
我已经在这里选择了一个相关但不同(并且同样没有答案!)的问题:在关闭HTML select元素时是否会触发一个DOM事件？

Answer 1

我有一个适用于此的工作解决方案适用于最新版本的iOS和Android.我还没有在旧版本上测试过.关于它没有两种方法:这个解决方案是一个黑客.但如果仔细实施,它就有效.

在我的情况下,我有iOS 7喜欢切换开关元素.select当开关打开时,我想要显示的选择器视图.在我的情况下,我们不需要或希望用户看到select字段本身.我们只想使用iOS'漂亮的滚动选择器界面.

我使用CSS来定位并select完全伸展开关.然后我将opacityCSS 设置为类似的东西opacity: .001;,使其对所有意图和目的都不可见.它可能仍然适用于不透明度0但我觉得留下一点不透明可能更安全,你真的无法看到它.现在,当用户点击正在显示切换的屏幕区域时,点击事件实际上将进入select导致选择器视图显示的区域.

在onchange该事件select设置我display: none;完全隐藏select.这意味着当用户触摸开关将其关闭时,他们正在与开关本身进行交互.当开关关闭时,我设置display: block为返回select其激活状态.

我的用例很窄但是位置/不透明度技术应该适用于许多用例,尽管select在你希望字段可见的情况下你可能必须有2个元素.

这是演示该技术的屏幕截图.将opacity在该截图用于演示目的设定为0.25.当你将它设置为0.001时,你看不到select

Answer 2

用 JS 触发 HTML 控件是一个非常灰色的区域，部分原因是安全原因，部分原因是缺乏支持。即使使用像 jQuery 这样的框架，您也不能click()像下面那样简单地通过一个链接来跟踪它click()像按钮一样- 您需要在浏览器级别触发本机单击事件（我相信最新版本的 Selenium 可以做到这一点，但这是一个测试框架不适合这个问题）。恭喜您能够在 Chrome 中取得部分结果！但是，您不会找到使用实际选择输入的通用解决方案。

我建议使用不同类型的控件 - 如果您想按一个按钮来激活一项功能，则可以使用垂直堆栈的按钮；如果您想要多选格式，则可以使用一堆由标签支持的单选按钮（带有一点 CSS） 。