Нельзя вводить поля ввода html в iOS после нажатия дважды

У меня возникла проблема с iOS, и я выставил для нее скрипку:

http://jsfiddle.net/Hk56Q/

Если прослушиватель событий добавлен в документ для любого события касания (touchstart/touchmove/touchhend), например:

function onTouch( e ){};
document.addEventListener( 'touchstart', onTouch, false );

что приводит к тому, что поля ввода имеют следующее поведение в iOS:

  • Первое касание: вход становится фокусом, и пользователь может правильно ввести его.
  • Последующие штрихи (с фокусом на поле уже на месте): ввод текста больше не работает

Я испытываю и тестирую эту проблему на iOS 5, 5.1 и 6, как на iPad, так и на iPhone (симуляторы и фактические устройства).

Единственное исправление, по-видимому, заключается в удалении прослушивателя событий, чтобы восстановить правильное поведение полей ввода (или вообще никогда не добавлять слушателя вообще):

document.removeEventListener( 'touchstart', onTouch);

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

Скрипка ведет себя правильно на моем телефоне Android.

Любые идеи, почему это происходит? Или как иметь глобальные пользовательские обработчики событий для событий касания на месте, которые не нарушают входы на iOS?

Ответ 1

Вот обходной путь. Установите фокус на окно, а затем вернитесь к node, в период ожидания:

function fixIpadTouch(node){
    node.ontouchend=function(e){
        if(document.activeElement===node){
            window.focus();
            setTimeout(function(){
                node.focus();
            },0);
        }
    }
}

Ответ 2

Вариант ответа Терри работал над этой ошибкой Mobile Safari (!!!) в моем случае. Здесь "#input" и этот код находятся на странице iframe:

var el = $('#input');
el.on('keydown', function() {
  window.focus()
  el.focus()
});

Ошибка запускается несколькими способами, но "keydown" выполняется надежно. Это также приводит к следующему нажатию клавиши.

Ответ 3

jQuery Mobile 1.2.0 должен быть тем, что вам нужно

ДОКАЗАТЬ! Прежде чем поставить галочку в поле:

PROVE(before)

После отметки поля:

After ticking