iOS 上的 JavaScript：打开一个 HTML 选择元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6097240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript on iOS: opening an HTML select element
提问by Premasagar
I'm not hopeful, but I'll ask just in case.
我不抱希望，但我会问以防万一。
I would like to be able to use JavaScript to open a select element in mobile Safari for iPhone/iPad.
我希望能够使用 JavaScript 在 iPhone/iPad 的移动 Safari 中打开一个选择元素。
An extensive Google / Stack Overflow search shows that a lot of people would like to be able to do this in browsers in general, but it is not supported (why not, I wonder?). Various hacks have been suggested, from calling focus()on the select element and changing its sizeproperty to make more optionelements visible, or constructing an entirely mock select element with <div>and <ul>elements. I would, however, like to use the native browser select controls in iPad and iPhone.
广泛的 Google / Stack Overflow 搜索表明，很多人通常希望能够在浏览器中执行此操作，但它不受支持（我想知道为什么不支持？）。已经提出了各种技巧，从调用focus()select 元素并更改其size属性以使更多option元素可见，或者使用<div>和<ul>元素构建完全模拟的 select元素。但是，我想在 iPad 和 iPhone 中使用本机浏览器选择控件。
I wondered, just maybe, someone might know of a proprietary Apple WebKit method to do this. It would be something like:
我想知道，也许有人知道一种专有的 Apple WebKit 方法可以做到这一点。它会是这样的：
var myselect = document.getElementsByTagName("select")[0];
myselect.open(); // this method doesn't exist
As a bonus, it'd also be handy to know of a boolean property that says whether the select element is currently open/active, or not (i.e. not just whether the element has focus). I know I can work this out by tracking click and change events, but a simple property would be useful.
作为奖励，知道一个布尔属性也很方便，该属性表示选择元素当前是否处于打开/活动状态（即不仅仅是元素是否具有焦点）。我知道我可以通过跟踪点击和更改事件来解决这个问题，但一个简单的属性会很有用。
Wishful thinking?
妄想？
UPDATE:
I don't yet have the answer, but I've found that simulating a mousedownsuccessfully opens a select element in Google Chrome, but not iPad or Firefox and so on:
更新：
我还没有答案，但我发现mousedown在 Google Chrome中模拟成功打开了一个选择元素，但不是 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);
UPDATE:
I've asked a related, but different (and similarly unanswered!) question on select boxes here: Is there a DOM event that fires when an HTML select element is closed?
更新：
我在这里问了一个关于选择框的相关但不同（同样没有答案！）的问题：是否有一个 DOM 事件在 HTML 选择元素关闭时触发？
采纳答案by BoffinBrain
Triggering HTML controls with JS is a very gray area, partly because of security reasons, and partly due to lack of support. Even using frameworks like jQuery, you cannot simply click()a link to follow it in the same way as click()on a button - you need to trigger a native click event at the browser level (I believe the latest version of Selenium does this, but that's a testing framework so unsuitable for this problem). Congrats on being able to achieve a partial result in Chrome! However, you will not find a universal solution that uses real select inputs.
用 JS 触发 HTML 控件是一个非常灰色的区域，部分是出于安全原因，部分是由于缺乏支持。即使使用像 jQuery 这样的框架，您也不能click()像click()在按钮上一样简单地使用链接来跟踪它- 您需要在浏览器级别触发本机点击事件（我相信最新版本的 Selenium 可以做到这一点，但这是一个测试框架不适合这个问题）。恭喜您能够在 Chrome 中实现部分结果！但是，您不会找到使用真实选择输入的通用解决方案。
I would suggest using a different type of control - either a vertical stack of buttons if you want to press one to activate a feature, or a stack of radio buttons backed by labels (with a little CSS) if you want a multi-choice format.
我建议使用不同类型的控件 - 如果你想按下一个按钮来激活一个功能，或者是一堆垂直的按钮，如果你想要一个多选格式，或者一堆由标签支持的单选按钮（带有一点 CSS） .
回答by macinjosh
I have a working solution for this that works on recent versions of iOS and Android. I haven't yet tested on older versions. There are no two ways about it: this solution is a hack. But it works if implemented carefully.
我有一个适用于最新版本的 iOS 和 Android 的解决方案。我还没有在旧版本上测试过。没有两种方法：这个解决方案是一个黑客。但如果仔细实施，它会起作用。
In my situation I had iOS 7 like toggle switch element. I wanted the picker view for the selectto be presented when the switch was turned on. In my case we did not need or want the user to see the selectfield itself. We merely wanted to use iOS' nice scrolly-picker interface.
在我的情况下，我有 iOS 7 之类的切换开关元素。我希望在select打开开关时显示选择器视图。在我的例子中，我们不需要或不希望用户看到select字段本身。我们只是想使用 iOS 漂亮的滚动选择器界面。
I used CSS to position and stretch the selectcompletely over the switch. I then set the opacityin CSS to something like opacity: .001;which makes it invisible for all intents and purposes. It may still work with opacity 0 but I felt leaving a little opacity there may be safer and you really can't see it all anyway. Now when the user taps the area of the screen that is displaying the switch the tap events are actually going to the selectwhich causes the picker view to display.
我使用 CSS 来定位和拉伸select完全在开关上。然后我将opacityin CSS设置为类似的东西opacity: .001;，这使得它对于所有意图和目的都不可见。它可能仍然适用于不透明度 0，但我觉得在那里留下一点不透明度可能更安全，无论如何你真的看不到这一切。现在，当用户点击显示开关的屏幕区域时，点击事件实际上会select导致选择器视图显示。
On the onchangeevent of the selectI set display: none;to completely hide the select. This means that when the user touches the switch to turn it off they are interacting with the switch itself. When the switch is toggled off I then set display: blockto return the selectto its active state.
在onchange该事件select我一套display: none;完全隐藏select。这意味着当用户触摸开关将其关闭时，他们正在与开关本身进行交互。当开关关闭时，我将设置display: block返回select到其活动状态。
My use case is narrow but the position/opacity technique should be adaptable to many use cases though you may have to have 2 selectelements in cases where you want the field to be visible.
我的用例很窄，但位置/不透明度技术应该适用于许多用例，尽管select在希望字段可见的情况下可能必须有 2 个元素。
Here is a screenshot demoing the technique. The opacityis set to 0.25 in this screenshot for demo purposes. When you set it to 0.001 you can't see the select
这是演示该技术的屏幕截图。将opacity在该截图用于演示目的设定为0.25。当您将其设置为 0.001 时，您将看不到select
回答by Doruk Eker
The select element needs to be visible. If you use jQuery you can do it as follows:
select 元素需要可见。如果您使用 jQuery，您可以按如下方式进行：
$('mySelectElementSelector').focus();
On mobile it will show the default select control. On desktop just focus on the select control.
在移动设备上，它将显示默认的选择控件。在桌面上只关注选择控件。
