13

我有这个例子:

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

当用户选择选项(使用鼠标或键盘)时,我需要捕获一个事件。

我尝试这样做onchange="MySuperFunction();",但这仅在选择一个项目然后列表未聚焦时才有效。

4

3 回答 3

18

input事件应该满足您的需要。据我了解,您不能直接使用数据列表,但它通过list属性连接到输入。此事件绑定将继续该输入:

document.getElementById('browsers-input').addEventListener('input', function (event) {
   if (event.inputType == 'insertReplacementText')
       console.log('autocomplete option selected'); 
});

http://jsfiddle.net/vccfv/

于 2013-02-28T23:51:01.543 回答
2

要使用 JQuery 样式获得与“Explosion Pills”解决方案相同的效果:

$("#browsers-input").on("input", MySuperFunction);
于 2015-04-22T12:49:25.730 回答
1

jQuery你可以使用http://jquery.com/.change

$('datalist#browsers').change(MySuperFunction);

或者

$('datalist#browsers').change(function(){
  // stuff
});
于 2013-02-28T23:36:33.900 回答