HTML5 datalist - 模拟点击事件以公开所有选项
Posted
技术标签:
【中文标题】HTML5 datalist - 模拟点击事件以公开所有选项【英文标题】：HTML5 datalist - simulate a click event to expose all options 【发布时间】：2013-07-09 02:40:06 【问题描述】：当单击按钮使输入元素成为焦点时，我试图自动向用户显示 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>
我的代码与 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);
【问题讨论】：
Programmatically make datalist of input[type=url] appear with JavaScript 的可能重复项 重复***.com/q/14381217/453605 【参考方案1】：这个特性目前没有在规范中定义，虽然它会很好。
请参阅以下问题，因为它涉及您描述的同一问题： Programmatically make datalist of input[type=url] appear with JavaScript
【讨论】：
以上是关于HTML5 datalist - 模拟点击事件以公开所有选项的主要内容，如果未能解决你的问题，请参考以下文章
html5 datalist 选中option选项后的触发事件