Список входных данных HTML - триггер события, когда входное значение равно значению параметра

#javascript #html #html-input #html-datalist

#javascript #HTML #html-ввод #html-список данных

Вопрос:

Я пытаюсь создать выпадающий список пользователей:

 <datalist id="list">
      <option value="User_01"></option>
      <option value="User_02"></option>
      <option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="alert(this.value)"/>

Когда я набираю / выбираю параметр из списка, запускается событие «oninput».

Однако, когда я сначала пишу точно такое же значение внутри ввода, а только затем нажимаю на опцию, событие не запускается.

Есть ли у меня какой-либо способ вызвать событие, даже если входное значение совпадает со значением параметра?

Чтобы прояснить:

Введите «User_01» в поле ввода.
Выбор параметра «User_01».
Событие не запускается.

1. пробовали события ввода или ввода?

2. @VisakhVijayan Сначала я попробовал событие keyup, и событие было запущено, но я не мог определить разницу между щелчком мыши и типом ключа. В конце концов, после вашего комментария я попробовал еще раз, и мне удалось найти атрибут «key» в событии, который может определить, вводил ли пользователь вместо того, чтобы нажимать на опцию. Спасибо

Ответ №1:

oninput запускается только при изменении значения ввода. Поскольку вы уже ввели точное значение в поле, оно не изменяется, поэтому события нет. Я не нашел способа вызвать событие, когда кто-то выбирает параметр из datalist, который соответствует значению, но вы все равно можете использовать событие oninput, чтобы проверить, соответствует ли значение какому-либо из параметров.

измените событие в своем коде:

 <datalist id="list">
      <option value="User_01"></option>
      <option value="User_02"></option>
      <option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="checkInput(this.value)"'/>

и добавьте немного js для проверки значения по списку параметров:

 var options = [].slice.call(document.getElementById("list").options).map( function(option) { return option.value; });

var checkInput = function(value) {
  console.log(options.includes(value));
  console.log(options.indexOf(value));
  if(options.indexOf(value) >= 0) console.info("value match!");
}

jsfiddle: https://jsfiddle.net/sq16vxzo /

includes() выдает простое значение true / false, а indexOf() выдает индекс параметра, соответствующий текущему значению.

Ответ №2:

Нажатие клавиши срабатывает, когда вы нажимаете или нажимаете enter в списке данных. Вам просто нужно указать, является ли это a KeyboardEvent или an Event (это тот, который вы хотите)

Вы можете сделать это, проверив key свойство

 if(!e.key) { ... }