Посмотрите на код ниже:
<html>
<head>
<script>
function onInput() { console.log("onInput"); }
function onChange() { console.log("onChange"); }
function onSelect() { console.log("onSelect"); }
function onPaste() { console.log("onPaste"); }
</script>
</head>
<body>
<input type="text" list="browsers" name="browser" oninput="onInput()" onchange="onChange()" onpaste="onPaste()">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firef">
<option value="Firefo">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</body>
</html>
Моя проблема в том, что я не могу выяснить, щелкает ли пользователь по элементу из списка данных, или выбирает его, щелкая по списку или нажимая клавишу Tab, или вводит всю строку вручную. Возможно ли это сделать с помощью тега ввода, привязанного к списку данных? Если нет, каковы альтернативы? Кстати, решение в чистом JavaScript является предпочтительным.