带有数据列表选项的角度输入，如何区分用户输入并从边缘浏览器的列表中选择选项

Question

下面的代码是显示带有选项的输入。每当用户键入时，都应该搜索该文本并显示结果。对于在输入事件上实现的这个'onInputChanges()'。这在 Chrome 浏览器中完美运行，但在 Edge 浏览器中，它不起作用。

参考了很多 StackOverflow 问题，但没有一个是特定于边缘浏览器的。

<div>
    <input type="text" list="browsers" (keyup.enter)="addValue(fieldInput.value); fieldInput.value=''"
    #fieldInput (input)="onInputChanges(fieldInput.value, $event)">

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

输入事件 在用户键入内容或从数据列表中选择选项时在 Chrome 中触发。 在 chrome 浏览器中，下面的代码 (Object.prototype.toString.call(event)) 标识用户是输入值还是从列表中选择值。 Chrome 浏览器，如果用户键入，则 Object.prototype.toString.call(event) 返回为“InputEvent”，否则返回为“Event”。

onInputChanges(fieldInput.value, $event) {
let isInputEvent = Object.prototype.toString.call(event).indexOf("InputEvent")> -1);
if(isInputEvent) {
  //user typed the value in input box
}else {
  //selected from list
 }
}

但在 Edge 浏览器中，Object.prototype.toString.call(event) 总是返回为“Event”，因此无法区分用户从 Edge 的列表中输入或选择的值。

还有其他替代方法来识别事件信息吗？ 注意： event.type 总是返回 'input' 所以不能使用它。

1. 当用户输入时
2. 如果从选项列表中选择了一个选项。

基本示例：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

Answer 1

Edge 浏览器版本是多少？我已经在我的 Edge 浏览器（Microsoft Edge 42.17134.1.0 版本）中使用以下代码尝试了您的代码，似乎一切正常：

<div>
  <input type="text" list="browsers" (keyup.enter)="addValue(fieldInput.value); fieldInput.value=''"
  #fieldInput (input)="onInputChanges(fieldInput.value, $event)">

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

<span>
  {{selectedvalue}}
</span>

component.ts 文件中的代码：

  onInputChanges(value, event){
    this.selectedvalue=value;
  }

截图如下：