ページの要素 (リンクやボタンなど) にフォーカスがある場合、アウトラインが表示されます。マウスではなく、キーボードによってその要素にフォーカスが与えられた場合にのみ、このアウトラインを表示したいと思います。
その要素が JavaScript でどのようにフォーカスされたかを判断することは可能ですか? もしそうなら、どうすればブラウザ自体のアウトライン機能を制御できますか?
ページの要素 (リンクやボタンなど) にフォーカスがある場合、アウトラインが表示されます。マウスではなく、キーボードによってその要素にフォーカスが与えられた場合にのみ、このアウトラインを表示したいと思います。
その要素が JavaScript でどのようにフォーカスされたかを判断することは可能ですか? もしそうなら、どうすればブラウザ自体のアウトライン機能を制御できますか?
ブラウザーは CSSoutline
プロパティを使用して、既にご存知かもしれませんが、どの要素にフォーカスがあるかを示します。したがって、jQuery では次のように使用できます。
$(document).ready(function() {
$("body").on("mousedown", "*", function(e) {
if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
$(this).css("outline", "none").on("blur", function() {
$(this).off("blur").css("outline", "");
});
}
});
});
説明:この関数は、mousedown
任意の要素のイベントを探します。このイベントはデリゲートされます。つまり、現在ページ上にある要素だけでなく、今後動的に作成される要素にも適用されます。要素の上でマウスをクリックすると、その CSSoutline
プロパティが に設定されnone
ます。アウトラインが削除されます。
対象の要素は、 の新しいハンドラを取得しblur
ます。要素からフォーカスが移ると、outline
プロパティは空白の文字列に設定され (要素のstyle
属性から削除されます)、ブラウザーが再びアウトラインを制御できるようになります。次に、要素は独自のblur
ハンドラーを削除してメモリを解放します。このように、要素はキーボードからフォーカスされたときにのみアウトライン化されます。
以下の Rakesh のコメントに基づいて、少し変更を加えました。この関数は、既にoutline
セットがあるかどうかを検出できるようになり、オーバーライドを回避します。ここでデモ。
CSS
:focus{
outline: none;
}
.outline{
outline: 2px solid rgba(200,120,120, 0.8);
}
jQuery コード
$(function(){
$('*').on('keydown.tab', function(e){
/*
TAB or Shift Tab, Aw.
Add some more key code if you really want
*/
if ( 9== e.which && this == e.target ){
window.setTimeout( function(){
$('.outline').removeClass('outline');
$(document.activeElement).addClass('outline');
}, 100 );
}
});
});
これはうまくいきます。キーボードを使用して要素がフォーカスされている場合にのみアウトラインが表示されます (Tab と Shift Tab のみを認識していますが、さらに追加することはできます)。
動作を確認してください: http://jsbin.com/okarez/1