如何检测从数据列表中选择时更改的输入字段

How do detect input field changed when selecting from a datalist?

本文关键字：选择 字段 输入 列表 何检测 检测 数据      更新时间：2023-11-03

我有一个带有附加数据列表的输入：

<input type="text" list="mylist">
<datalist id="mylist">
<option>1
<option>2
</datalist>

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

您可以捕获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>

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

Fiddle

您可以使用输入事件，比如这个

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

示例

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

问题是如何特别是知道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>

你在听INPUT的变化吗？还是数据列表更改？

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

看看这个小提琴

相关文章：