iPad HTML Focus

Question

У меня проблема с фокусировкой текстового поля на iPad.Где я использую:

$(document).bind("click",function(event) {
    alert('click');
    focusTextArea();
});

Фокус установлен на текстовую область, и появляется клавиатура.Однако при вызове с помощью touchend focusTextArea не вызывается и клавиатура не отображается.Моя focusTextArea функция:

function focusTextArea() {
    $('#textArea').focus();
}

Кто-нибудь знает, почему это происходит, и как я мог бы заставить это работать?

TIA,

Адам

Answer 1

К сожалению, фокусировка на iPad невозможна. Единственный способ поместить фокус в нужное поле - это когда пользователь «щелкает» по нужному полю.

Обновление 2015-01-08:

Как объяснено в этом ответе Мэттом :

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

Answer 2

Вы должны попробовать fastclick js , должно работать.Проверьте этот пример (также размещен здесь ).

Также я сделал этот jsfiddle пример , который, кажется, работает на iPad (Chrome и Safari).

Надеюсь, это поможет.

Answer 3

Извините, ребята, я думаю, что должен сообщить вам плохие новости: -)

Столько вопросов к "Как мне сфокусироваться на входном поле на iPad, используя CLICK HANDLER?"И оооочень много ответов, которые на самом деле не помогают ...

Плохая новость, которая на самом деле не новость, заключается в том, что это невозможно, потому что сфокусированный элемент снова потеряет фокус, в то время какоперация с выделенным абзацем подлежит завершению.

Пример, приведенный выше для пояснения

$(document).bind("click",function(event) {
    alert('click');
    focusTextArea();
});

означает: 1. фокус на документе 2. запуск события щелчка (фокус на textarea) 3. вернуться к документу (документ снова получает фокус) 4. завершить событие щелчка, документ теряет фокус.

Теперь о хороших новостях!

Окончательное решение (протестировано iPhone, iPadandroid с собственным интернет-приложением, Firefox и Chrome): используйте вместо этого touchend или mouseup!

$(document).bind("touchend",function(event) {
    alert('click');
    focusTextArea();
});

или

$(document).bind("mouseup",function(event) {
    alert('click');
    focusTextArea();
});

В сочетании с плагином jquery

* jQuery Browser Plugin v0.0.6
* https://github.com/gabceb/jquery-browser-plugin

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

var clickevent = '';
if ($.browser.mobile) clickevent = 'touchend';
else clickevent = 'click';

Теперь я могу использовать следующее

$(document).bind(clickevent,function(event) {
    alert('click');
    focusTextArea();
});

который будет работать для бдругие, настольные компьютеры и мобильные устройства.

Надеюсь, это поможет: -)