Tabindexフォーカススタイル

divをtabindex属性でtabbableにして、隠しコンテンツにアクセスできるようにしました。Tabindexフォーカススタイル

現在のところ、マウスでクリックすると、divはブラウザ:focusスタイリングを取得します。

キーボードからアクセスすると、フォーカス可能なスタイリングのあるタブ可能な要素を持つ方法がありますか？？アンカー要素にはデフォルトでこれがあります。 tabindex='0'と

Divマウスとキーボード相互作用

にブラウザのフォーカスのスタイルを取得するアンカーは、私はアンカーをエミュレートするためのdivたいだけ

キーボード操作にブラウザのフォーカスのスタイルを取得します。それをアンカーにすることは、残念ながらオプションではありません。

私は本当に迷っています。

編集 - >ここでは一例です：http://jsfiddle.net/LvXyL/2/

出典

2012-04-20 Henry Hoffman

FWIW：あなたが記述している動作は実際にブラウザに依存するようです：Chromeでは、divはマウス/キーボードでフォーカススタイルを取得しますが、記述したとおりにキーボードでのみアンカーします。 IEでは*マウスとキーボードのどちらでもフォーカス矩形を取得します。一方、Firefoxでは、キーボードがそのフレームで使用されるまでフォーカスアウトライン*を取得しません。その後、マウスとキーボードの両方のフォーカスアウトラインが取得されます。 – BrendanMcK

-1

JavaScriptを使用できる場合は、onclick属性を使用してみてください。あなたが長いために、マウスのキーを保持している場合、設定されたフォーカスのための失われたフォーカス

onclick="this.focus()"ため

onclick="this.blur()"クリック失わ焦点にDIVとAが焦点にhttp://jsfiddle.net/LvXyL/6/

デメリットを設定されている

例は、目に見えるフォーカススタイルです時間。

出典

2012-04-20 12:32:45 kubedan

返信いただきありがとうございますが、これは非常に近いですが、マウスを押し下げたままで、要素をクリックしてドラッグすると、フォーカスが変わりません。 –

this.blur（）を使用することは、正しいキーボード使用を妨げるため、お勧めしません。 tabbable div *をクリックするとそこにフォーカスを置くべきですが、this.blur（）を使うとこれを防ぐことができます。 – BrendanMcK

もちろん、：focus擬似クラスをdivとスタイルに追加するだけです。アウトラインとボーダーの使用をお勧めします。私はフィドルを更新しました。

div:focus {outline: blue solid 2px;}

KubはJSソリューションを提案しましたが、実際には必要ない場合はなぜjsを使用しますか？

出典

2012-04-20 12:36:58

彼はマウスではなくキーボードでのみフォーカスを設定したいからです。 – kubedan

このユーザーがJSオフの場合はどうなりますか？このアプローチは、マウスとキーボードをカバーします。 –

JSがオフの場合、私のソリューションはうまくいきません。 – kubedan

Tabindexフォーカススタイル

答えて

関連する問題