4

シナリオ:

4 つ以上の iframe をロードするフォームを含むページがあります。これは他の Web サイト (API) によって生成されるため、この iframe を制御することはできません。

Iframe にはフォームと入力があります。

私のコードで

<form>
<div class="fields">
    <!--onload iframe will populate this area-->
</div>  

<div class="fields">
    <!--onload iframe will populate this area-->
</div>  

<div class="fields">
    <!--onload iframe will populate this area-->
</div> </form>

ページの読み込み時にこれが発生します

<form>
<div class="fields">
    <iframe src="" frameborder="0">
        <html>
            <body>
                <form action="">
                    <input type="text">
                </form>
            </body>
        </html>
    </iframe>
</div>  

<div class="fields">
    <iframe src="" frameborder="0">
        <html>
            <body>
                <form action="">
                    <input type="text">
                </form>
            </body>
        </html>
    </iframe>
</div>  

<div class="fields">
    <iframe src="" frameborder="0">
        <html>
            <body>
                <form action="">
                    <input type="text">
                </form>
            </body>
        </html>
    </iframe>
</div></form>

クロム: フォームに入力するとき、クロムでのタブ移動は問題ありません。たとえば、最初の入力をクリックしてから、フォーム全体の入力が完了するまで、次の入力のために Tab キーを押します。

しかし、Firefoxのモジラでは：

最初の入力をクリックし、次にタブを 2 回押して次の入力を取得します。入力フィールドを直接選択するのではなく、すべての要素に移動するようです。

これを防ぐスクリプトはありますか？クロムの通常の動作が好きですか？

このTabindexをチェックしてiframeをスキップしますが、内部のコンテンツはスキップしません が、私の場合は異なります

4

1 に答える 1

1

**更新 - これは Firefox と Safari の特別なアクセシビリティ機能であることに注意することが重要です。つまり、意図的にこのように実装されました。あなたの質問は実際にはこれにリンクされています-タブ付きのときにFirefoxでiframeから点線のアウトラインを削除する方法

** これを回避する方法についてのアイデア..

今日、まったく同じ問題に遭遇し、解決策を見つけました。ただし、次の 2 つの重要な注意事項があります。

  1. 以下のコードは、部分的な解決策 (つまり、あなたが求めたもの) のみを示しています。ユーザーが SHIFT + TAB (戻る) を押すと、もう一度境界線が表示されます。したがって、これを完全にサポートするには、これらのキーボード イベントをリッスンし、対象の Iframe にメッセージを送信し、そのコントローラー内で入力にフォーカスする必要があります。また、さまざまなブラウザーでのこれの実装を検討し、違いを適切に処理する必要があることに注意してください。

  2. Iframe のコンテンツにアクセスし、リスナーをアタッチし、入力を取得してフォーカスするには、プロバイダー/iframe のコンテンツを完全に制御する必要があります。

したがって、JavaScript コントローラーでは、次のようにして TAB (進む) 機能を実装できます。

constructor() {
   ...
   this.input = document.getElementById("yourInputId");
   window.addEventListener("focus", event => {
     event.preventDefault();
     this.input.focus();
   });
}

上記のスニペットで何が起こるかは次のとおりです。

  1. ウィンドウ全体 (この場合は iframe 全体) にイベント リスナーを登録します。

  2. 本文のフォーカス イベントをインターセプトします (私の知る限り、Firefox は最初にクロスオリジンの Iframe の本文にフォーカスします。おそらく、それが別のコンテキストであることを示すためです)。

  3. デフォルトを防ぐ - フォーカスしない

  4. 代わりに入力を直接フォーカスします。

于 2019-09-25T16:57:56.160 に答える