如何在單擊數據列表選項列表時觸發事件？

Question

我有一個看起來像的數據列表：

 <datalist id="foodlist"> <option value="one" ></option <option value="two" ></option> <option value="three" ></option> </datalist> <input type="text" list="foodlist" autocomplete=true id="inputItem"/>

我希望在用戶使用 JavaScript 選擇列表中的選項時觸發一個事件。

如何實現？

onClick，onChange 似乎不起作用。

Answer 1

我知道這有點舊，但我想我應該在某處記錄它。 如果您試圖從下拉選擇中檢測輸入而不是點擊本身，您可以使用“輸入”事件並檢查傳遞的事件對象的類型 - 剪切/粘貼/按鍵輸入將傳遞一個“InputEvent”對象，而數據列表選擇將傳遞一個通用的“事件”對象。

 var textbox = document.getElementById("inputItem"); textbox.addEventListener("input", function(e){ var isInputEvent = (Object.prototype.toString.call(e).indexOf("InputEvent") > -1); if(!isInputEvent) alert("Selected: " + e.target.value); }, false);

 <datalist id="foodlist"> <option value="one" ></option> <option value="two" ></option> <option value="three" ></option> </datalist> <input type="text" list="foodlist" autocomplete=true id="inputItem"/>

Answer 2

<datalist id="foodlist">    
    <option value="one" ></option>
    <option value="two" ></option>
    <option value="three"></option> 
</datalist>

<input id="txt" type="text" list="foodlist" autocomplete=true id="inputItem"/>

document.getElementById('txt').addEventListener('input', function () {
    console.log('changed'); 
    var val = document.getElementById("txt").value;
    alert(val);
});

datalist 標簽僅在某些瀏覽器中受支持。 這是獲取選定值的簡單技巧。

Answer 3

雖然這是 4 歲，但我今天偶然發現了它，並遇到了其他人報告的跨瀏覽器問題。 我能夠通過監聽輸入字段上的 keyup 事件，然后檢查事件類型來解決這個問題。

<input type="text" name="field_name" id="field_id" list="fields_list">
<datalist id="fields_list"></datalist>

<script>
var fieldInput = document.getElementById("field_id");

fieldInput.addEventListener('keyup', function(e) { if (isKeyboardEvent(e)) { myFunction(); } });

function isKeyboardEvent(e) {
    return (e instanceof KeyboardEvent);
}

function myFunction() {
   /* function that does something only on keyboard input */
}
</script>

實際擊鍵將是KeyboardEvent而數據列表選項單擊將是Event 。

確認在 Chrome、Firefox 和 Edge 中工作。