Блог

У меня есть элемент ввода type=’text’, который в iOS Safari переходит в состояние сбоя, так что элемент ввода выглядит сфокусированным и отправляет события ввода, но не обновляет значение поля; новые символы не отображаются при вводе пользователем. типы. На веб-сайте, который я создаю, я запускаю это состояние после изменения размера ** сфокусированного элемента ввода текста ***. Я создал jsfiddle, который надежно воспроизводит ошибку:

 <input id='ipt' type='text' style='width:250px;height40px;'/> 

<script>
  var ipt = document.getElementById('ipt');
  ipt.addEventListener("keyup", onkeyup, false);
  function onkeyup(e){
    ipt.style.width = '100px';  
    ipt.removeEventListener("keyup", onkeyup, false);
  }
</script>
 

Чтобы воспроизвести ошибку:

1. Открыть http://jsfiddle.net/55dth/embedded/result в iOS Safari
2. Сфокусируйте элемент ввода нажатием
3. Увеличьте масштаб, чтобы показать всю ширину ввода (необходимо для запуска ошибки)
4. Введите что-нибудь

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

Или как выйти из этого состояния. Я могу определить, что я нахожусь в состоянии, прослушивая ввод ключа и проверяя значение в точке вставки по сравнению со значением ключа в событии. Я попытался переключить только для чтения, сбросить значение, фокус (), переключить inputmode…

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

* Я почти уверен, что для перехода в это состояние необходимы другие условия, однако я не уверен в точных условиях.