分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – HTML5 datalist – 模拟click事件以公开所有选项，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_489_0@

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

@H_502_7@我尝试通过使用$(‘#text-input’)获得焦点来模拟点击和双击.focus(); (这个工作),然后使用jquery .click()(一次和两次),.dblclick(),. turigger(‘click’),甚至使用jquery.simulate.js.所有这些都会触发$(‘#text-input’).click(function(){…});但实际上并不影响浏览器中可见输入元素的状态.

@H_502_7@这是我的HTML：

@H_502_7@

<!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>

@H_502_7@我的代码与dblclick尝试：

@H_502_7@

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

解决方法

此功能目前未在规范中定义,尽管它很好. @H_502_7@

@H_502_7@请参阅以下问题,因为它涉及您正在描述的同一问题：
Programmatically make datalist of input[type=url] appear with JavaScript

@H_489_0@

大佬总结

以上是大佬教程为你收集整理的jquery – HTML5 datalist – 模拟click事件以公开所有选项全部内容，希望文章能够帮你解决jquery – HTML5 datalist – 模拟click事件以公开所有选项所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。