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

Question

以下代码将显示带有选项的输入。每当用户键入内容时，都应搜索该文本并显示结果。对于在 input事件上实现的“ 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始终返回“输入”，因此不能使用它。

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

以下截图：