web-dev-qa-db-ja.com

CSSのtabindex

CSSを使用してtabindexを制御できますか?

[〜#〜] edit [〜#〜]

私の目標は、divでキーダウンイベントをキャッチすることです。このページを見ました http://www.quirksmode.org/js/events/keys.html# キーボードイベントをテストし、ドキュメントと本文以外でキーダウンが発生する唯一の方法を示しています。何らかのフォーム要素またはリンクには、tabindexを宣言する必要があります。しかし、私はW3Cサイトで読んだ:

次の要素がtabindex属性をサポートしています:A、AREA、BUTTON、INPUT、OBJECT、SELECT、およびTEXTAREA。

だから私は少し混乱しています、標準に準拠し、私のユースケースを機能させるために何をすべきですか?

EDIT2

私の全体のユースケースは、人工的なスクロールバーを備えた多くのコンテンツを持つdivです。マウスイベントでスクロールすることはできますが、これまでのところキーボードではうまくいきません。

45
Boris Hamanov

2017年に更新

コメントで@Wallopが指摘したように、nav-indexプロパティは2015年に「実装への関心の欠如」のために 仕様から削除されました でした。


CSS3-UI でW3Cによって導入されたnav-indexプロパティを見てください。

このプロパティの動作はtabindexとまったく同じで、どの要素にも適用できます。

「nav-index」プロパティは、シーケンシャルナビゲーション順序(「タブ移動順序」とも呼ばれる)を指定する、入力メソッドに依存しない方法です。このプロパティは、HTML4/XHTML1属性「tabindex」の代替です

おそらく、ユースケースに最適な標準準拠のソリューションであるnav-indexは、Operaこれまで(2012年6月現在)のみで解釈され、W3Cによって "Feature at risk"としてマークされているため、いつでも削除できます。

代替のクロスブラウザソリューションは次のとおりです。

  • 非標準準拠:tabindexDIV属性を設定します。これは、すべての一般的なブラウザーで機能します。

  • 標準準拠:DIVA属性が設定されていないアンカー要素(href)に置き換え、display: blockでスタイルを設定し、tabindex属性を追加します。

BoltClockのポイントに関しては、タブ移動順序が非常に論理的であることに同意します(テキスト選択順序とタブ移動順序の両方が、ドキュメント内で要素が配置される順序に密接に関連しています)。一方、今日のCSSには幅広い目的があります。ドキュメントのコンテンツ(contentプロパティ)だけでなく、イベントが発生する場合のイベントの動作も操作できます。つまり、pointer-eventsdisplayまたはz-indexを使用すると、ポインターイベントの順序が変更されます。これらが非常に基本的なCSSプロパティである場合、KeyBoardEventsにも影響を与えることができないのはなぜですか?

28
daluege

これは少し古いですが、-moz-user-focusのようなcssオプションがあります。 Webkitに相当するものがあると確信しています。

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

7
Noitidart