4
我試圖自動顯示一個datalist html5元素的所有選項，當用戶點擊一個按鈕時將輸入元素放到焦點中。通常，當用戶點擊兩次相關的文本輸入元素時，所有選項都會顯示。我想以編程方式模擬此行爲，以便用戶在開始輸入之前可以看到所有選項。HTML5 datalist - 模擬單擊事件以顯示所有選項
我試圖通過讓使用$('#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);
可能重複：/ /stackoverflow.com/questions/16133661/programmatically-make-datalist-of-inputtype-url-appear-with-javascript） – SobiborTreblinka
http://stackoverflow.com/q/14381217/453605的副本 –