从数据列表中选择时，如何检测输入字段？

Question

我有附加datalist的输入：

<input type="text" list="mylist">

<datalist id="mylist">
<option>1
<option>2
</datalist>

当我从列表中选择一个选项时，change事件不会在输入元素上触发。那么如何检测输入的变化？

Answer 1

您可以捕获input事件：

document.querySelector('input').addEventListener('input', function() {
  alert('Changed!');
});

<input type="text" list="mylist">

<datalist id="mylist">
<option>1
<option>2
</datalist>

<强>更新

我最初没有注意到jQuery标记，@ YanickRochon提出了一个很好的观点，即它也应该捕获更改事件。

新代码段

$('input').on('input change', function() {
  alert('Changed!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="mylist">

<datalist id="mylist">
<option>1
<option>2
</datalist>

Answer 2

您可以使用input事件，例如

$('#input-list').on('input change', function () {
  console.log($(this).val());
})

Example

Answer 3

$(document).ready(function(){

  $('input').on('input', function () {
      alert("changed");
   })

});

Fiddle

Answer 4

所有其他答案都没有区分输入方案

问题是如何具体知道输入何时由datalist更改，不更改为其他任何内容。这是非常重要的区分。

以下代码将通过键盘或鼠标或任何其他方式通过键入，粘贴以及实际选择来自之间的选项来绝对区分用户输入一个<datalist>

var noneDatalistInput;

$('input').on('keydown paste', onNoneDatalistInput)
          .on('input', onInput);

// raise a flag
function onNoneDatalistInput(e){
    if( e.key == "Enter" ) return;
    if( noneDatalistInput ) clearTimeout(noneDatalistInput);
    noneDatalistInput = setTimeout(function(){ noneDatalistInput = null }, 50);
}

function onInput(){
    var isDatalistInput = !noneDatalistInput;
    console.log('was a datalist option selected? ', isDatalistInput);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="mylist">

<datalist id="mylist">
  <option>1</option>
  <option>2</option>
</datalist>

Answer 5

你正在听INPUT改变吗？或DataList更改？

// wont work
$("#myList").on('change', function () {
    alert("yay!");
});

// fires yay! when change value (after focus out)
$("#myText").on('change', function () {
    alert("yay!");
});

查看此fiddle