4

IFrame を有効または無効にしてタブ オーダーから外す簡単な方法はありますか?

クリックするとリンクに関連付けられた IFrame を表示または非表示にし、IFrame の SRC プロパティを Wordpress ブログの PressThis フォームの 1 つに設定するいくつかのリンクを含む単純な HTML ページを作成しました。このようにして、1 つのページから任意のブログに簡単に投稿を追加できます。

Tab キーの動作を除いて、このページのすべてが期待どおりにうまく機能します。すべての IFrame は最初は非表示で、SRC が設定されていません (例: <iframe src=""></iframe>)。問題は、Tab を押すと、リンクからリンクに移動するのではなく、リンク間の非表示の (そして空の) IFrame にフォーカスが設定されることです。

フレームが表示され、PressThis フォームがロードされている場合、Tab を押すと、フォームの入力フィールド (およびページ内の他のすべて) をリンク間で正しくナビゲートします。ただし、フレームが再び非表示になると、Tab を押すと引き続き各フィールドが通過するため、キーボードでリンクからリンクに移動するのはかなり悪いです。

IFrame を切り替えて、非表示のときに Tab キーを押すとスキップし (タブ オーダーから削除されます)、表示されているときに Tab キーを押すとフォーム フィールド間を移動する方法を見つけようとしています。

私は周りを見回しましたが、HTML 要素を直接無効にすることについて何も見つかりませんでした (HTML 要素は、DOM の一部として無効なプロパティを持っていないようであり、無効な CSS スタイルもありません)。私が見つけた最も近いものは、特定のフォームフィールドを無効にすることについて尋ねている人々でした.

これを行う簡単な方法はありますか？

ありがとう。

4

2 に答える 2

6

あなたがやろうとしていることのいくつかのサンプルコードを提供することは常に良いことです.

とにかく、あなたが探しているのはtabindexプロパティだと思います。それを使用して、要素のタブ順序を指定したり、ループから要素を削除したりすることもできます。

簡単な例: http://jsfiddle.net/zFXNM/

<a tabindex="1" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

<a tabindex="2" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

<a tabindex="3" href="#">Link 1</a><br/>
<iframe tabindex="-1" src=""></iframe><br/>

値は次のように機能します。

  • tabindex > 0= 要素のタブ オーダーを設定します。順序は ASC なので、1 が最初になります
  • tabindex = 0= タブ オーダーは、ドキュメントのタブ フローに従います。
  • tabindex =-1= ドキュメント タブ フローから要素を削除します (タブ化できません)
于 2010-09-28T05:00:47.157 に答える
2

要素へのタブ移動を無効にするには、iframeのtabindexプロパティを-1に設定します。

例えば

<iframe src="" tabindex="-1" id="some-iframe"></iframe>

これがデモです。入力をタブで移動してみてください。

src属性を設定した後でタブを再度有効にしたい場合は、javascriptを使用してタブを0に戻すだけで、残りはブラウザが処理する必要があります。

document.getElementById("some-iframe").tabIndex = 0;
于 2010-09-28T04:40:49.960 に答える