13

ページの要素 (リンクやボタンなど) にフォーカスがある場合、アウトラインが表示されます。マウスではなく、キーボードによってその要素にフォーカスが与えられた場合にのみ、このアウトラインを表示したいと思います。

その要素が JavaScript でどのようにフォーカスされたかを判断することは可能ですか? もしそうなら、どうすればブラウザ自体のアウトライン機能を制御できますか?

4

7 に答える 7

11

ブラウザーは 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セットがあるかどうかを検出できるようになり、オーバーライドを回避します。ここでデモ。

于 2013-08-01T17:34:36.883 に答える
0

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

于 2013-08-01T18:11:28.047 に答える