HTML5 datalist - 模拟click事件以公开所有选项

Question

HTML5 datalist - 模拟click事件以公开所有选项

use*_*550 5 jquery html5 click simulate html-datalist

当单击一个按钮使输入元素成为焦点时,我试图自动向用户显示datalist html5元素的所有选项.通常,当用户单击两次关联的文本输入元素时,将显示所有选项.我想以编程方式模拟此行为,以便用户可以在开始键入之前查看所有选项.

我曾尝试通过使用越来越注重模拟单击和双击$('#text-input').focus();(这工作),然后使用jquery .click(),(一次两次).dblclick(),.trigger('click')甚至使用jquery.simulate.js.所有这些都会触发$('#text-input').click(function() {...});但实际上不会影响浏览器中可见输入元素的状态.

这是我的HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <div id="main">
         <form>
             <datalist id="categories">
                 <option value="travel">
                 <option value ="work">
                 <option value="literature">
                 <option value="teaching">
             </datalist>
             <input type="text" list="categories" id="text-input">
             <button type="button" id="mic-button">
             </button>
         </form>
     </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我的代码与dblclick尝试:

(function($) {

$(document).ready(function() {
    var textInput = $('#text-input');

    textInput.dblclick(function() {
        alert('Handler for .dblclick() called.');
    });

    $('#mic-button').click(function() {
        textInput.focus();
        // list all the options by tricking the datalist
        // to think the user double clicked on it
        textInput.dblclick();
    });
})(jQuery);

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 1

该功能目前尚未在规范中定义，尽管它本来就很好。

请参阅以下问题，因为它涉及您所描述的同一问题： Programmatically make datalist of input[type=url] indicates with JavaScript

归档时间：	12 年，8 月前
查看次数：	5217 次
最近记录：	11 年，11 月前