javascript - 是否有可能以编程方式触发移动设备的 native 选择弹出窗口?

标签 javascript html css mobile

至少有些手机在打开选择元素时会显示原生弹出窗口而不是默认下拉菜单。有没有一种方法可以在不实际使用选择元素的情况下从 Javascript 手动触发选择弹出窗口?

我试过隐藏一个选择元素并在我需要用户进行选择时触发它的点击事件,但这似乎不起作用。

似乎有效的是使选择透明(opacity: 0)并将其覆盖在应触发选择弹出窗口的元素之上。然而,这感觉很老套,并且需要其他不必要的代码来保留悬停/点击功能。

最佳答案

试试这个:

<html>
<head>
    <style>
        html, body
        {
            margin  :0;
            padding :0;
        }
        .hiddenElem
        {
            position :absolute;
            top      :-1000px;
            left     :-1000px;
        }
    </style>
</head>
<body>
    <div class="hiddenElem">
        <select name="selectField" id="selectField">
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        setTimeout(function()
        {
            var element=$("#selectField")[0], worked=false;
            if(document.createEvent)
            {
                var e=document.createEvent("MouseEvents");
                e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                worked=element.dispatchEvent(e);
            }
            else if(element.fireEvent)
            {
                worked=element.fireEvent("onmousedown");
            }
            if(!worked)
            {
                alert("It didn't worked in your browser.");
            }
        }, 100);
    </script>
</body>
</html>

引用:How to open the select input using jquery

关于javascript - 是否有可能以编程方式触发移动设备的 native 选择弹出窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31101620/

相关文章:

javascript - 在 Rails 4 上处理 AJAX 的正确方法是什么?

xml - 是否有用于使用智能感知编辑 XML 的 ASP.NET/HTML5 控件?

css - 悬停后如何在鼠标移开时反转动画

css - 如何将 HTML5 Boilerplate 与 Twitter Bootstrap 正确集成?

多个子元素的 CSS 选择器

JavaScript - 正则表达式匹配不是函数

javascript - 如何创建非模态 React 对话框?

php - 传递要由外部 .js 文件写入的复杂 PHP 变量

javascript - Twitter Bootstrap 崩溃 : change display of toggle button

html - 如何将过渡应用到列表元素并使其增长而不影响其背景图像或其他列表项?