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

屏幕截圖如下：