Угловой ввод с опциями списка данных, как дифференцировать пользовательский ввод и выбрать опцию из списка в браузере ребер

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>

inputсобытие запускается в Chrome, когда пользователь вводит что-либо или опция выбирается из списка данных.В браузере Chrome ниже код (Object.prototype.toString.call (событие)) определяет, ввел ли пользователь значение или выбрал значение из списка.Браузер Chrome, если пользователь вводит данные, Object.prototype.toString.call (событие) возвращается как «InputEvent», иначе возвращается как «Событие».

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 (событие) всегда возвращается как « Событие », из-за этого не может различить введенное пользователем или выбранное пользователем значение из списка в 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;
  }

Скриншот как показано ниже: