iOS上的JavaScript：打开HTML select元素

Question

我没有希望，但我会问以防万一。

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

广泛的Google / Stack Overflow搜索显示很多人希望能够在浏览器中执行此操作，但不支持（为什么不呢，我想知道？）。通过在select元素上调用focus()并更改其size属性以使更多option元素可见，或使用<div>构建完全模拟的select元素，建议了各种黑客攻击和<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);

更新
我在选择框中询问了一个相关的但不同的（并且没有回答！）问题：Is there a DOM event that fires when an HTML select element is closed?

Answer 1

我有一个可行的解决方案适用于最新版本的iOS和Android。我还没有在旧版本上测试过。它没有两种方法：这个解决方案是一个黑客。但如果仔细实施，它就有效。

在我的情况下，我有iOS 7喜欢切换开关元素。我希望在打开开关时显示select的选择器视图。在我的情况下，我们不需要或希望用户看到select字段本身。我们只是想使用iOS＆＃39;很好的滚动选择器界面。

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

在onchange的{​​{1}}事件中，我设置select以完全隐藏display: none;。这意味着当用户触摸开关将其关闭时，他们正在与开关本身进行交互。当切换开关时，我设置select以使display: block返回其活动状态。

我的用例很窄，但位置/不透明度技术应该适用于许多用例，但如果您希望字段可见，则可能必须有2个select元素。

这是演示该技术的屏幕截图。此屏幕截图中的select设置为0.25以进行演示。将其设置为0.001时，您无法看到opacity

Answer 2

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

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

Answer 3

需要显示select元素。 如果您使用jQuery，可以按如下方式执行：

$('mySelectElementSelector').focus();

在移动设备上，它将显示默认选择控件。在桌面上只关注选择控件。

Answer 4

您是否尝试过change()方法？