Блог

Главная - Вопросы по программированию - Что вызывает повторение букв при вводе текста в Google Chrome для Android?

Что вызывает повторение букв при вводе текста в Google Chrome для Android?

#javascript #android #jquery #ajax

#javascript #Android #jquery #ajax

Вопрос:

Я разрабатываю веб-приложение с текстовым вводом, которое предоставляет предложения через динамический список данных. В мобильном Chrome для Android у меня периодически, но часто повторяются первые 3 или 4 буквы, введенные во ввод. Похоже, что такое поведение проявляется в основном, когда я быстро вводю ввод после загрузки страницы.

Вот видео проблемы на YouTube (вероятно, оно поможет вам увидеть нажатия клавиш, если вы смотрите его в замедленном режиме … 0,5x или 0,25x).

Параметры datalist заполняются следующим образом: oninput вызывает функцию javascript, отправляющую значение input ‘s через ajax в php-скрипт. Этот php-скрипт SELECT обрабатывает результаты из базы данных MySQL, которые соответствуют input значению. Результаты echo возвращаются на исходную страницу в <option> тегах. Я не включил никаких функций, которые изменяют значение input s на основе запроса. Единственными затронутыми элементами являются <option> буквы s в <datalist> .

Я не заметил такого поведения при других вводах текста на моем сайте, и главное input , что отличает это, — это вызов ajax. Я также не смог воспроизвести это поведение на рабочем столе, даже при эмуляции мобильных устройств с помощью 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 amp;amp; this.status == 200) {
                $('#options').html(this.responseText);                          
            }
        };  
        xhttp.open("GET", "getoptions.php?str=" sendstr, true);
        xhttp.send();
    }
</script>

Я не думаю, что мой CSS или PHP вызывают проблему, поэтому я пока опускаю это.

Очевидно, что желаемое поведение заключается в том, что каждое нажатие клавиши приводит к тому, что этот символ вводится во ввод один раз. Кроме того, для datalist предоставить сужающийся список предложений. Если я печатаю несколько медленнее, чем предпочитаю, это то, что происходит (или, по крайней мере, я не заметил этого при медленном наборе текста).

Что может быть причиной этого?

Комментарии:

1. Я предлагаю вам не выполнять вызовы XHR при прослушивании событий ввода или, по крайней мере, отменить обратный вызов, чтобы предотвратить перегрузку запроса. Возможно, это и есть причина проблемы. Проверьте, как отменить функцию здесь levelup.gitconnected.com /…

2. @MaxiDiaz это хорошее предложение, несмотря ни на что, но оно не решило мою проблему, когда я его реализовал.

Метки: