この特定の問題をStackOverflowとさまざまなApple/WebKitバグレポートシステムでここで検索しましたが、具体的に引用されたものはまだ見つかりません(これは不可能だと思われます)。
問題:支払いページには、さまざまなフォームフィールド(入力と選択)があります。 PCI /セキュリティの目的で、クレジットカード番号フィールドを提供するiframeがあります(iframeonlyにはその1つのフィールドがあり、他には何もありません)。
問題は、justiOSユーザーの場合、クレジットカード番号フィールドに焦点を当てることができない場合があることです。 2つの異なるが、関連するiOS Webkitのバグがあるようです。以下の更新を参照してください。
あるフィールドから別のフィールドに移動するだけであれば、通常は機能します。しかし、彼らがフィールドを跳ね回る場合、彼らは試してみるというシナリオに入ることができます 彼らはクレジットカード番号フィールドに焦点を合わせることができません クレジットカードフィールドがフォーカスを取得しているようには見えません(レンダリングの問題のようです)。
最初は、JSや目に見えないDIVが邪魔をするかもしれないと思っていましたが、最終的に 問題を再現するためのHTMLのみの例 を作成することができました。 (問題の再現方法の説明はサンプルページにあります。)codepenにリンクするには、いくつかのコードを含める必要があります。
<iframe src="iframe.html"></iframe>
私は一貫して、iOS 10-12デバイスでこの問題を再現することができました(iOS 9デバイスには問題がないようです)。
後世のために、別の、しかし半関連のWebKitバグで遭遇した回避策を提供します。しかし、他の人がこの問題に出くわし、他の回避策を発見したのではないかと思っていました。
さらに掘り下げた後、2つの別々のバグに苦しんでいることがわかりました。 1つ目は主に上記で説明したとおりですが、iOSがフィールドに焦点を当てているようにlookしていないレンダリングの問題のようです。ただし、に行く場合 コードペンの例 新しい例 フィールドにフォーカスがあるように見えない場合でも、テキストを入力すると正しくレンダリングされます。
2番目の問題は発生する可能性は低くなりますが、より有害です。トリップには3つの基準が必要です。
これら3つのことの結果、ユーザーはiframeフィールドにフォーカスをまったく置くことができません(document.activeElementはフォーカスを持つ最後の親ページ入力を示しますが、入力はどこにも行きません)。 iframeでフォーカスを取得する機能を再確立するのは困難な場合があります。通常、iframeフィールドが表示されている間にフォーカスできる親ページ入力が必要です。そこからiframeフィールドにフォーカスします。
3つの基準のいずれかが変更された場合(クロスドメインではなく、これらの3つのタッチイベントのイベントリスナーが表示されないか、iframeが表示されない場合)、最初の-禁止の少ないバグのみが存在します。
この実現についても、以下の「回答」を更新します。
更新2:私が立てた新しい例は両方のバグを示しています アクション;最初のページはバグ#1で、クロスオリジンバグ#2の例へのリンクがあります。
私の環境では、IFrameに@Ryan Lの提案document.addEventListener('touchstart', {});
を追加することで問題が解決します。
追加するのは非常に簡単で、IFrameに固有であり、コンテナページには影響しないため、これは良いことです。
問題の説明:iOS 12を実行するiDevice(電話とパッド)で実行されるSafariの別のフォームフィールドを「タッチ」(選択、編集)できません。これは、コンテナページにタッチイベントが追加されたIFrameのページでのみ発生します。デバッグが難しい非常に不明瞭な条件のセット。
私はこのイライラする小さなバグの修正を見つけたと信じており、ほとんどのバグのようにそれは非常に簡単な修正です。
行う必要があるのは、iframe内の入力に次のCSSを適用することだけです。
input:hover {
cursor: text
}
更新された例を次に示します。 https://codepen.io/ryanoutloud/project/full/AEKGjj
バグ自体については、実際には目的のフィールドに焦点が当てられており、キーボードからの入力はすべて正しく登録されます。入力が始まると、キャレットが適切な位置にジャンプします。のontouchstart=""
解決策は、フィールドにフォーカスが置かれると、ビューからキャレットを完全に削除するだけです。
ここに私がつまずいた回避策があります:add ontouchstart=""
を各フォーム入力要素に(おそらく選択します)。
これは このWebKitのバグ で提供されている回避策の1つに由来します(=ズームのコンテキストで)iframeに適切にディスパッチされない外部ページクリックイベントに関連します。
私はまだこれを本番環境にプッシュしていませんが、最初のテストではこの動作を示しているようです。問題を完全に修正するには、親フォーム要素とiframeフォーム要素の両方にこれを配置する必要がありました。おそらくJavaScriptを使用して、各フォーム要素にプロパティを追加することなく、これをフォームフィールドに添付します。
このアプローチに関する他の提案や懸念を受け入れます。
私のためのこの仕事
document.addEventListener('keydown', function(e) {
window.focus()
$(':focus').focus()
});