输入列表选择更改事件 [英] Input List Selection Changed Event

问题描述

我有这个例子：

 < datalist ID = 浏览器 > 
< option value =Internet Explorer> 
< option value =Firefox> 
< option value =Google Chrome> 
< option value =Opera> 
< option value =Safari> 
< / datalist> 
  

我需要抓住一个事件，当用户选择选项（使用鼠标或键盘）

我试图做onchange =MySuperFunction（）;但是，只有当选择了一个项目，然后该列表是未被聚焦时才有效。

解决方案

/ code>事件应该为您需要的工作。据了解，您不能直接使用datalist，而是通过列表属性连接到输入。此事件绑定将继续输入：

  document.getElementById（'browsers-input'）。addEventListener（'input' function（）{
 console.log（'changed'）; 
}）; 
  

http：// jsfiddle.net/vccfv/

I have this example:

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

I need to catch an event, when the user selects option (with mouse or keyboard).

I tried to do onchange="MySuperFunction();" but this works only when an item is selected and then the list is unfocused.

解决方案

The input event should work for what you need. As I understand, you can't use a datalist directly, but it is connected to an input by the list attribute. This event binding would go on that input:

document.getElementById('browsers-input').addEventListener('input', function () {
   console.log('changed'); 
});

http://jsfiddle.net/vccfv/

这篇关于输入列表选择更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！