web-dev-qa-db-ja.com

モバイルSafariのオートフォーカステキストフィールド

Mobile Safariでは、遅延期間を設定した後、テキストフィールドに焦点を合わせることができません。この問題を紹介するサンプルコードを添付します。ボタンのクリックで.focus（）をトリガーすると、すべてが期待どおりに機能します。 setTimeout関数のように、コールバックにフォーカスを掛けると、モバイルサファリでのみ失敗します。他のすべてのブラウザーでは、遅延が発生し、フォーカスが発生します。

紛らわしいことに、モバイルサファリでも「focusin」イベントがトリガーされます。これ（および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>

〜同様〜SO質問：

javascriptfocusmobile-safariautofocus
54
boymc

これはバグではなく、モバイルSafariの機能だと思います。 FastClick の作業で、同僚と私は、コールスタックの最初の関数が非プログラムイベント。あなたの場合、setTimeoutの呼び出しは新しい呼び出しスタックを開始し、セキュリティメカニズムが作動して、入力にフォーカスを設定できないようにします。

IOSでは、入力要素にフォーカスを設定するとキーボードが表示されるため、Googleのように、ページの読み込み時に入力要素にフォーカスを設定するWebページはすべて、iOSで使用するのは非常に面倒です。 Appleこれを防ぐために何かをする必要があると決めたので、@ DAには同意しません。これはバグではなく機能です。

これに関する既知の回避策はないため、遅延を使用するという考えを捨てる必要があります。

2012年8月更新：

IOS 5以降、合成クリックイベントによってトリガーされるハンドラーは、入力要素にフォーカスをトリガーできます。更新された FastClick入力フォーカスの例 を試してください。

80
Matthew Caruana Galizia

元のイベントがsetTimeoutではなくユーザーの操作によるものである場合にのみクリックイベントをディスパッチすることで、キーボードを上げることができました。結果として、タッチエンドイベントからキーボードを上げることができますが、タイムアウトからはできません。

5
Nick Saretzky

Focus（）は、サイトをホーム画面に追加し、このリンクでサイトを開いた場合にのみ機能するようです。

1
elweilando

.focus（）を、イベントマップ内の2つの別々のイベントにアタッチすることで機能させることができましたが、一種のハックです。

FastClick.jsを追加した後、これはiOSで行われます。focus（）は、イベントに関連付けられた関数によってアクティブにされた場合にのみ機能します。ただし、フォーカスは、jQueryの.focus（）を使用するときに実際に呼び出されるモバイルサファリのイベントマップ内のイベントでもあります。 SO冗長化して、オブジェクトのフォーカスイベントに別の.focus（）をアタッチして、確実にプルスルーすることができます。これは、DOMで入力を作成するときに特に効果的です。 。最近MeteorJSのプログラミングが好きですが、これがソリューションのように見えます：

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

うまくいけば、これがそこにいる誰かにとって有用であり、これを理解するのに2時間ほどかかった。

EDIT：まあ、特にMeteorJSでは、.focus（）をイベントから呼び出す必要があるため、Template.templateName.rendered関数も使用できません。ただし、何らかの理由でjQueryを介して入力を追加すると、イベント内で入力に集中できます。それが行く方法だと思います。これは私がやったことです：

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

マットの答えに追加します。少なくともiOS 5.1上のSafariでは、この問題は修正されています。 FastClickは機能します。つまり、クリックイベントの合成はフォーカスに失敗しません。ただし、これは、単一のfocus()コードをすべてのiOSバージョンで動作させたい人には役立ちません。

0
dodysw