点击网页上的任意位置即可打开选择下拉列表

Question

我正在构建一个将在移动设备上查看的网页(特别是Blackberry).我的导航下拉列表实现为页面左上角的<select>.我希望用户可以点击/点按页面上的任意位置左上角的选择下拉菜单,而不是要求用户直接点击下拉列表.除了左上角的选择下拉菜单外,该页面没有其他链接或可点击对象.

这甚至可能吗？从我到目前为止发现的情况来看,似乎不可能以编程方式打开<select>下拉菜单,但我想我会把这个具体案例抛到那里.

Answer 1

由于不可能使用 JavaScript 来伪造按键（出于安全原因也是如此），最接近的方法是更改​​元素的大小<select>（将其从下拉控件更改为列表框控件并返回）。

\n\n

\n\n

\n\n

Demo、代码（纯JS，无库）

\n\n

当用户通过单击（或点击）选择一个选项时，单击事件处理程序会通过将其大小设置回 1 来“关闭”列表框，然后将其转换回正常的下拉控件。我只在（非移动）Chrome 中对此进行了测试，请告诉我它是否适用于黑莓。

\n\n

编辑：

\n\n

我创建了一个小型 jQuery 插件，它将行为和可配置性包装成更易于理解的控件。我已经在 iOS 4 上的 Safari Mobile 上对此进行了测试，它的行为就像该浏览器中的常规下拉菜单一样，只是它可以通过编程方式打开。

\n\n

演示、代码（jQuery 1.7）

\n\n

它的工作原理如下：

\n\n

$("select").openable({ triggers: $("#trigger") });\n

\n\n

单击任何触发器将打开选择 UI。

\n\n

我还为要捕获的按键事件添加了一个处理程序Enter，Esc并Space“关闭”列表框。这模仿了桌面浏览器上下拉控件的选择机制。

\n\n

当然，在桌面浏览器上，这将改变页面的布局，因为它与本机下拉控件不同。你必须为此想出一个 CSS 解决方案（可能有position: absolute和z-index）。\xc2\xa0但是在 iOS 上，选择 UI 不会呈现在页面上，所以这不是问题。

\n\n

再说一遍，还没有在黑莓手机上测试过这个插件......

\n