Я разрабатываю веб-приложение с текстовым вводом, который предоставляет предложения через динамический список данных.В мобильном Chrome для Android я периодически, но часто повторяю первые 3 или 4 буквы.Похоже, что это поведение проявляется в основном, когда я набираю ввод быстро после загрузки страницы.
Вот видео на YouTube о проблеме (Вероятно, оно поможет вам увидеть нажатия клавиш, если смотреть его в замедленном режиме ... 0,5x или 0,25x).
Опции списка данных заполняются следующим образом: oninput вызывает функцию javascript, отправляющую значение input через ajax в скрипт php.Этот php-скрипт SELECT выводит результаты из базы данных MySql, которые соответствуют значению input.Результаты echo возвращаются на исходную страницу в тегах <option>.Я не включил никаких функций, которые изменяют значение input в зависимости от запроса.Затронуты только элементы <option> в <datalist>.
Я не заметил такого поведения в других текстовых вводах на моем сайте, и главное, что отличает это input, этоAjax Call.Я также не смог повторить это поведение на рабочем столе даже при эмуляции мобильного через DevTools.У меня иногда бывает очень странное поведение клавиатуры на моем телефоне Android, когда я использую некоторые нативные приложения, такие как, например, Facebook Messenger, но мое внутреннее чувство заключается в том, что этот пример не связан.Я использовал LG Keyboard и Google Gboard, и проблема возникает с обоими.
HTML
<body>
<form id="regform" method="post" action="submit.php">
<legend>Input?</legend>
<input type="text" required="true" id="inp" name="inp" placeholder="input" oninput="sendquery();" list="options" autofocus />
<datalist id="options">
</datalist><input type="submit" value="Submit" />
</form>
</body>
JAVASCRIPT
<script>
function sendquery() {
var sendstr = $('#inp').val();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
$('#options').html(this.responseText);
}
};
xhttp.open("GET", "getoptions.php?str="+sendstr, true);
xhttp.send();
}
</script>
Я не думаю, что мой CSS или PHP является причиной проблемы, поэтому пока я ее опускаю.
Очевидно, желаемое поведение просто для каждого нажатия клавиши, чтобы привести к этомусимвол вводится во вход один раз.Кроме того, для datalist, чтобы предоставить сужающийся список предложений.Если я печатаю несколько медленнее, чем предпочитаю, это происходит (или, по крайней мере, я не замечал этого при медленном наборе текста).
Что может быть причиной этого?