具有datalist选项的Angular Input，如何区分用户输入并从边缘浏览器中的列表中选择选项

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;
  }

屏幕截图如下：