iOS上的JavaScript：打开HTML选择元素 [英] JavaScript on iOS: opening an HTML select element

问题描述

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

I'm not hopeful, but I'll ask just in case.

我希望能够使用JavaScript在移动版Safari中打开select元素对于iPhone / iPad而言。

I would like to be able to use JavaScript to open a select element in mobile Safari for iPhone/iPad.

广泛的Google / Stack Overflow搜索表明，很多人希望能够在浏览器中完成此操作，但它不是支持（为什么不，我想知道？）。已经提出过各种黑客技巧，从select元素调用 focus（），并更改其 size 属性以使更多选项元素可见，或者用< div> 和构造完全模拟选择元素。 ul> 元素。然而，我会喜欢在iPad和iPhone上使用原生浏览器选择控件。

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 size property to make more option elements 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.

我想知道，也许有人可能知道专有的Apple WebKit方法可以做这个。它会是这样的：

I wondered, just maybe, someone might know of a proprietary Apple WebKit method to do this. It would be something like:

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

作为奖励，它也可以方便地知道一个布尔属性，表示select元素当前是否处于打开/活动状态（即不仅仅是元素是否具有焦点）。我知道我可以通过跟踪点击和更改事件来解决这个问题，但是一个简单的属性会很有用。

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.

一厢情愿的想法？

更新：

我还没有答案，但我发现模拟 mousedown 已成功在Google Chrome中打开select元素，但不包括iPad或Firefox等等：

UPDATE:
I don't yet have the answer, but I've found that simulating a mousedown successfully opens a select element in Google Chrome, but not iPad or Firefox and so on:

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);

更新：

我问过相关的，但不同的（和类似的未答复！）在这里的选择框的问题：是否有一个DOM事件在HTML select元素关闭时触发？

推荐答案

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

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.

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

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.

这篇关于iOS上的JavaScript：打开HTML选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！