Текстовое поле автофокус мобильного Safari


в мобильном Safari я не могу сосредоточиться на текстовом поле после установки периода задержки. Я прилагаю некоторый пример кода, демонстрирующий проблему. Если, onclick кнопки, вы запускаете .фокус(), все работает, как ожидалось. Если вы повесите фокус на обратный вызов, как функция setTimeout, то он не работает только в мобильном safari. Во всех остальных браузерах есть задержка, затем происходит фокусировка.

смутно, событие "focusin" запускается, даже в мобильном safari. Данный и ~похожие ~ комментарии в SO) заставляют меня думать, что это ошибка мобильного сафари. Любые указания будут приняты.

Я тестировал в эмуляторе и на iPhone 3GS / 4 iOS4.

пример HTML:

<!DOCTYPE html> 
  <html lang='en'> 
    <head> 
      <title>Autofocus tests</title> 
      <meta content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' name='viewport'> 
      <meta content='yes' name='apple-mobile-web-app-capable'> 
    </head> 
    <body>
      <h1> 
        Show keyboard without user focus and select text:
      </h1> 
      <p> 
        <button id='focus-test-button'> 
          Should focus on input when you click me after .5 second
        </button> 
        <input id='focus-test-input' type='number' value='20'> 
      </p> 
      <script type="text/javascript"> 
        //<![CDATA[
        var button = document.getElementById('focus-test-button');
        var input  = document.getElementById('focus-test-input');

        input.addEventListener('focusin', function(event) {
          console.log('focus');
          console.log(event);
        });

        button.addEventListener('click', function() {
          // *** If triggered immediately - functionality occurs as expected
          // input.focus();
          // *** If called by callback - triggers the focusin event, but does not bring up keyboard or cursor
          var t = setTimeout("input.focus();",500);
        });
        //]]>
      </script>
    </body>
  </html>

~похож~ так вопросы:

6   51   2011-06-09 06:33:26

6 ответов:

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

помните, что на iOS установка фокуса на элементе ввода вызывает клавиатуру - так что все эти веб-страницы, которые устанавливают фокус на элементе ввода при загрузке страницы, как это делает Google, были бы чрезвычайно раздражающими для использования на iOS. Я думаю, Apple решила, что они должны были сделать что-то, чтобы предотвратить это. Поэтому я не согласен с @DA: это функция, а не ошибка.

для этого нет известного обходного пути, поэтому вам придется отказаться от идеи использования задержки.

Обновление Августа 2012:

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

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

кажется, что focus () работает только в том случае, если вы добавили сайт на главный экран и открыли сайт по этой ссылке.

добавление к ответу Мэтта. По крайней мере в Safari на iOS 5.1, эта проблема исправлена. Ваш FastClick работает, то есть синтезирование события щелчка не подведет фокус. Однако это не помогает людям, которые хотят их одного focus() код для работы на всех версиях iOS, вздох.

Я был способен сделать .focus () работает, прикрепляя его к двум отдельным событиям на карте событий, но это своего рода хаки.

после добавления FastClick.js, это то, что происходит в iOS: .focus () работает только тогда, когда его активирует функция, прикрепленная к событию. Но фокус тоже событие в карте событие мобильного браузера Safari, который на самом деле называется, когда вы используете jQuery по .внимание.)( Таким образом, вы можете быть избыточным и прикрепить другой .фокус () на событии фокуса объекта, чтобы убедиться что он тянет до конца. Это особенно хорошо работает, когда вы создаете вход в дом. Мне нравится программирование для MeteorJS в последнее время, вот как выглядит решение:

Template.templateName.events({
    "click button":function(){
        Session.set("makeButtonVisible",true);
        $("input.created").focus();
    },
    "focus input.created":function(){
        $("input.created").focus();
    }
});

надеюсь, это полезно для кого-то там, взял меня, как два часа, чтобы понять это.

EDIT: Ну, для MeteorJS в частности, вы не можете использовать шаблон.имя_шаблона.рендеренная функция либо потому что .фокус () должен быть вызван из события. Но для некоторых причина при добавлении ввода через jQuery вы можете сосредоточиться на нем внутри события. Предполагаю, что это путь к идти. Вот что я в конечном итоге сделал:

Template.templateName.events({
    "click button":function(){
        $("body").append("<input class='created' type='tel'>");
        $("input.created").focus();
    }
});

ты сам себе ответил. Вам нужно просто вызвать, если вы используете Jquery. Измените фокус () на триггер ("фокус"); в любой части вашего кода.

$("#searchField").триггер("фокус");