415

特定の要素でタブのインデックス作成を許可しないようにブラウザに指示する方法はHTMLにありますか?

私のページにはjQueryでレンダリングされるサイドショーがありますが、それをタブで移動すると、タブが表示されているすべてのものが非表示になっているため、タブコントロールがページ上の次の表示リンクに移動する前に多くのタブが押されますユーザーを視覚的に。

4

6 に答える 6

668

を使用できますtabindex="-1"

W3C HTML5仕様は、負のtabindex値をサポートしています。

値が負の整数
の場合ユーザーエージェントは、要素のtabindexフォーカスフラグを設定する必要がありますが、シーケンシャルフォーカスナビゲーションを使用して要素に到達することを許可しないでください。


ただし、これはHTML5機能であり、古いブラウザでは機能しない可能性があることに注意してください。W3C HTML 4.01標準(1999年以降)
に準拠 するには、tabindexが正である必要があります。


以下の純粋なHTMLでの使用例。

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

于 2011-03-04T11:07:37.513 に答える
141

tabindex仕様とHTMLではすべて小文字ですが、Javascript /DOMではそのプロパティが呼び出されることを忘れないでくださいtabIndex

プログラムで変更されたタブインデックスの呼び出しが機能しない理由を理解しようとすることを忘れないでくださいelement.tabindex = -1。を使用しelement.tabIndex = -1ます。

于 2014-02-28T16:35:29.593 に答える
12

これらがボタンやアンカーのようにタブ順序で自然に要素である場合、それらをタブ順序から削除することは、tabindex="-1"一種のアクセシビリティの匂いです。それらが重複する機能を提供している場合は、タブの順序からそれらを削除しても問題ありませんaria-hidden="true"。支援技術がそれらを無視するように、これらの要素に追加することを検討してください。

于 2014-06-13T10:42:18.197 に答える
9

をサポートしていないブラウザで作業している場合は、 スキップする必要のあるものを非常に高いタブインデックスtabindex="-1"に指定するだけで解決できる場合があります。たとえば、基本的にオブジェクトのタブ順序をページの最後に移動します。tabindex="500"

これは、中央にボタンが表示された長いデータ入力フォームに対して行いました。人々が頻繁にクリックするボタンではないので、誤ってタブで押してEnterキーを押してほしくありませんでした。disabledボタンなので動作しません。

于 2015-11-16T17:34:46.077 に答える
3

これを行う方法は、を追加することtabindex="-1"です。これを特定の要素に追加すると、キーボードナビゲーションでは到達できなくなります。tabindexをさらに理解するのに役立つ素晴らしい記事がここにあります。

于 2018-05-04T09:08:32.337 に答える
2

要素に属性disabledを追加するだけです(またはjQueryを使用して追加します)。無効にすると、入力のフォーカスや選択がまったくできなくなります。

于 2015-10-11T02:24:53.883 に答える