web-dev-qa-db-ja.com

iOS8では、.focus（）を使用すると、タッチ後に仮想キーボードとスクロールページが表示されます

IOS8より前は、入力要素でJavascript .focus()メソッドを使用しても効果がないように見えました（仮想キーボードは表示されませんでした）。最新のiOS 8リリースの後、.focus()メソッドを実行してもページのロードには影響がないように見えましたが、ユーザーが画面上のどこかをタッチすると、仮想キーボードが即座に表示され、フォーカスされている要素にページがスクロールします。 （これは、HTML属性「autofocus」を使用する場合の問題でもあります）

この変更により、私のサイトのiOS8ユーザーで問題が発生しました。ユーザーがページ上のボタンをクリックしようとすると、突然のスクロールとキーボードの出現により、画面の下のボタンが意図せずにクリックされてしまいます。

私はこれがiOS8のバグであり、意図的な機能ではないと仮定していますが、私の質問はこの問題を修正するための最も効率的な解決策は何ですか？

.focus()メソッドを使用するたびに、navigator.userAgentをチェックしてデバイスがiOS8かどうかを確認する必要がありますか？

javascriptiosuikeyboardautofocus
48
Mac Mad Ill

あなたは間違いなくiOS 8のバグにぶつかっているようです。 iOS7では、Safariは（見かけ上）ページの読み込み前にフォーカスが設定されたフォーカスのない要素を無視または保持します。これには、_<input autofocus>_とinput.focus()の両方が含まれますが、これらはある時点まで、おそらくページの読み込みまで発生します（インラインスクリプトでテストしました）。

IOS 8では、Safariは要素がフォーカスされたことを記憶しているように見えますが、タッチダウンイベントまで実際にはフォーカスしていません。次に、タッチアップを受け取った要素にクリックイベントを盲目的に送信します。

両方のブラウザは、ページのロード後に発生するinput.focus()に対して同じ動作をします。要素にズームし、キーボードを表示します。

テスト：

良いニュースは、事前に焦点を合わせたい要素の新しい動作について心配するだけでよいということです。もう1つの良いニュースは、ユーザーエージェントの回避策を使用する必要があるが、オートフォーカスしていないように既に動作しているため、すべてのiOSバージョンに使用できることです。

_if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
    element.focus();
}
_

これがアプローチのようです http://www.google.com は、いくつかの基本的なユーザーエージェントテストに基づいて使用します。

  • Mac Book Pro：ページを読み込む前のオートフォーカス。
  • iPhone：オートフォーカスなし
  • iPad：オートフォーカスなし
  • キットカット（Android）：フォーカスafterページの読み込み、おそらくソフトウェアキーボードの存在の追加検出.

そうでない場合は、先に進み、Apple at https://bugreport.Apple.com でレーダーを提出する必要があります。

30
Brian Nickel

Cordovaプロジェクトを開発している場合は、この行を追加して修正できます

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

あなたのconfig.xmlファイル。テスト済みIOS 8.3およびIOS 8.4

21
Del

IOS 8では、javascript focus（）コマンドのデフォルトの処理にAPIの変更があったようです。アプリケーションが、AppleのWebビューファサードを直接制御できるハイブリッドアプリである場合、以下はapples docsから直接のものです。

Webコンテンツがプログラムでキーボードを表示できるかどうかを示すブール値。

[myWebView setKeyboardDisplayRequiresUserAction：YES];

このプロパティがYESに設定されている場合、ユーザーはWebビューの要素を明示的にタップして、その要素のキーボード（または他の関連する入力ビュー）を表示する必要があります。 NOに設定すると、要素のフォーカスイベントにより、入力ビューが表示され、その要素に自動的に関連付けられます。

このプロパティのデフォルト値はYESです。

最後の段落から、このメソッド呼び出しはキーボード専用ではないようです。これは、ボード全体の入力ビュー、つまりドロップダウンおよび日付ピッカーなどのためのものであることを示しています.

このメソッド呼び出しは現在私には機能していないため、バグがあるように見えます。現在受け取っている動作は、デフォルトでNOになっているように対応しています。

4
xMythicx

私には解決策があります：

  1. すべての入力を無効にする
  2. フォーカスしたい入力を有効にします
  3. その入力にフォーカスを設定します
  4. 他のすべての入力を再度有効にします
1
Diodeus - James MacFarlane

ここに_jQuery.focus_の条件付きモンキーパッチがありますので、どこにでもuserAgentテストを追加する必要はありません。

JavaScript

_if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
  (function($) {
    return $.fn.focus = function() {
      return arguments[0];
    };
  })(jQuery);
}
_

CoffeeScript

_if /iPad|iPhone|iPod/g.test navigator.userAgent
  (($) ->
    $.fn.focus = ->
      arguments[0]
  )(jQuery)
_

注：_arguments[0]_を返すので、$(el).focus().doSomethingElse()などのメソッドチェーンを壊しません

1
Adam Fraser

2018年にこれに来る人のために、それを修正するプラグインがあります。これをインストールするだけで https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix とinput.focus()は自動的に動作します余分な仕事。

0
Ahmad Alfy

これについてのバグをApple Bug Reporterに記録し、彼らはそれを重複として閉じました。重複アイテムまたは問題自体について重複アイテムの状態のみが表示されます。

0
Lipata