HTML input datalist - 当输入值等于选项值时触发事件答案

【问题标题】：HTML input datalist - event trigger when input value is equals to the option valueHTML input datalist - 当输入值等于选项值时触发事件
【发布时间】：2021-03-19 02:20:33
【问题描述】：

我正在尝试制作用户下拉列表：

<datalist id="list">
      <option value="User_01"></option>
      <option value="User_02"></option>
      <option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="alert(this.value)"/>

当我从列表中键入/选择一个选项时，会触发“oninput”事件。

但是，当我先在输入中写入完全相同的值，然后单击选项时，事件不会触发。

即使输入值与选项值相同，我有什么方法可以触发事件吗？

说清楚：

在输入字段中输入“User_01”。
选择“User_01”选项。
事件未触发。

【问题讨论】：

尝试过 keyup 或 keydown 事件？
@VisakhVijayan 起初，我尝试了 keyup 事件并触发了该事件，但我无法区分选项单击和键类型之间的区别。最后，在您发表评论后，我再次尝试并设法找到事件的“关键”属性，该属性可以判断用户是否正在输入而不是单击选项。谢谢

标签： javascript html html-input html-datalist

【解决方案1】：

只有当输入值改变时才会触发oninput。由于您已经在字段中输入了确切的值，因此它不会更改，因此没有事件。当有人从 datalist 中选择与值匹配的选项时，我发现无法触发事件，但您仍然可以使用 oninput 事件来检查值是否与任何选项匹配。

更改代码中的事件：

<datalist id="list">
      <option value="User_01"></option>
      <option value="User_02"></option>
      <option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="checkInput(this.value)"'/>

并添加一些 js 来检查选项列表中的值：

var options = [].slice.call(document.getElementById("list").options).map( function(option) { return option.value; });

var checkInput = function(value) {
  console.log(options.includes(value));
  console.log(options.indexOf(value));
  if(options.indexOf(value) >= 0) console.info("value match!");
}

jsfiddle：https://jsfiddle.net/sq16vxzo/

includes() 为您提供简单的真/假， indexOf() 为您提供与当前值匹配的选项索引。

【讨论】：

【解决方案2】：

当您在数据列表中单击或按 Enter 键时触发 KeyUp。你只需要告诉它是KeyboardEvent还是Event（这是你想要的）

您可以通过检查 key 属性来做到这一点

if(!e.key) { ... }

【讨论】：