Странное поведение при вводе текста в Chrome для Android

Question

Я разрабатываю небольшое приложение, которое состоит из набора текстовых вводов, и каждое из них будет соответствовать только одному символу, и все входные данные вместе должны вести себя как один. Таким образом, когда ввод заполнен символом, следующий ввод должен быть выделен, ведя себя как каретка ввода. Таким же образом, когда вы очищаете ввод, он должен вести себя как удаление обычного символа, а предыдущий ввод должен быть выделен.

Вы можете увидеть мои работы здесь: https://codepen.io/Vitaozim/full/vqaRQY

Пример здесь:

Вот как я это сделал:

• Всякий раз, когда любой из элементов ввода, если он сфокусирован, весь его контент выделено, чтобы убедиться, что любой входной значение.

• Всякий раз, когда событие input запускается в любом из элементов ввода, может произойти одно из них:

  • Если новое значение ввода не пустое, фокусируется следующий элемент ввода. Если он получает значение, содержащее более 1 символа, код обрежет строку и оставит только последний символ.
  • Иначе, значение программно изменяется на один пробел, а предыдущий элемент ввода фокусируется. Значение изменяется на один единственный пробел, так что всякий раз, когда этот ввод снова фокусируется, будет некоторый контент, который будет выделен, а затем удален, вызывая условие «возврата».

Проблема в том, что он отлично работает в следующих браузерах:

• Chrome для Mac и iPhone
• Safari для Mac и iPhone
• Firefox для Mac, iPhone и Android

Но это глючит в Chrome для Android. Я проверил это на разных устройствах. Ошибки «возврата на задний план» и значение ввода не выделены в фокусе.

Я провел несколько тестов и заметил, что если я установлю выбор после setTimeout, равного 100 мс, это сработает. Это как если бы я переопределял поведение браузера по умолчанию ... Но это все еще очень странное поведение, потому что это происходит только при моделировании "возврата". В любой другой ситуации, когда ввод фокусируется, не имеет этот баг.

Answer 1

Похоже, что это общая проблема с Chrome.Вы должны иметь возможность использовать следующее.

setTimeout(function() {}, 0);

Другие ответы StackOverflow, предполагающие, что это известная ошибка в Chrome / Chromium.

• https://stackoverflow.com/a/32049253/1050507
• https://stackoverflow.com/a/17384592/1050507