Question

当页面元素具有焦点（例如链接或按钮）时，它们会显示轮廓。我希望这个大纲只显示当该元素通过键盘而不是鼠标给予焦点时。

是否有可能确定该元素如何通过JavaScript获得关注？如果是这样，我如何控制浏览器自己的概述功能？

Answer 1

浏览器使用CSS outline属性来显示哪个元素具有焦点，您可能已经知道了。所以，在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事件。此事件是委派，这意味着它将应用于页面上当前的元素以及将来动态创建的元素。在元素上单击鼠标时，其CSS outline属性设置为none;轮廓被移除。

目标元素获取blur的新处理程序。当从元素中获取焦点时，outline属性将设置为空字符串（这会将其从元素的style属性中删除），从而允许浏览器再次控制轮廓。然后，该元素删除其自己的blur处理程序以释放内存。这样，只有在从键盘聚焦时才会勾勒出元素。

修改

根据拉克什的评论，我做了一点改动。该函数现在可以检测是否已经设置了outline，并且将避免覆盖它。 Demo here.

Answer 2

http://jsfiddle.net/np3FE/2/

$(function(){
    var lastKey = new Date(),
        lastClick = new Date();

    $(document).on( "focusin", function(e){
        $(".non-keyboard-outline").removeClass("non-keyboard-outline");
        var wasByKeyboard = lastClick < lastKey
        if( wasByKeyboard ) {
            $( e.target ).addClass( "non-keyboard-outline");
        }

    });

    $(document).on( "click", function(){
        lastClick = new Date();
    });
    $(document).on( "keydown", function() {
        lastKey = new Date();
    });


});

CSS

*:active, *:focus {
    outline: none;
}

*:active.non-keyboard-outline, *:focus.non-keyboard-outline {
    outline: red auto 5px;
}

Answer 3

删除outline对于可访问性来说非常糟糕！理想情况下，只有当用户打算使用键盘时才会显示对焦环。

2018答案：使用:focus-visible。它目前是一个W3C提议，用于使用CSS设置仅键盘焦点的样式。在主流浏览器支持之前，您可以使用此强大的polyfill。它不需要添加额外的元素或更改tabindex。

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

我还写了一个更详细的post和一些演示，以防您需要更多信息。

Answer 4

我能看到的一个简单方法是使用鼠标事件来防止焦点被触发。

$('#element').click(function(){
   $(this).blur();
});

这会带来一个潜在的问题，即您根本无法使用鼠标来选择元素。所以你也可以添加一个类并调整焦点样式。

$('#element').click(function(){
   $(this).addClass('fromMouse');
});
$('#element').blur(function(){
  if($(this).hasClass('fromMouse'){
     $(this).removeClass('fromMouse');
  }
});

<强> CSS

.fromMouse{
  outline: none;
}

http://api.jquery.com/blur/

Answer 5

<强> 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

Answer 6

基于@theftprevention的答案，更可定制的解决方案可以是：

$(function(){
    $('body')
    .on('focus', '*', function() {
        var e = $(this);
        if (!e.is('.focus-mouse')) {
            e.addClass('focus-keyboard');
        }
    })
    .on('mousedown', '*', function() {
        $(this).removeClass('focus-keyboard').addClass('focus-mouse');
    })
    .on('blur', '*', function() {
        $(this).removeClass('focus-keyboard').removeClass('focus-mouse');
    });
});

现在，你只需要在CSS中使用.focus-keyboard和.focus-mouse类进行切割。

.focus-keyboard{
    background:#eeeeee;
}
.focus-mouse{
    outline: 0;
}

Answer 7

如果用户当前正在使用鼠标或键盘，则可以将类添加到正文以了解CSS

document.body.addEventListener('mousedown', function() {
  document.body.classList.add('using-mouse');
});
document.body.addEventListener('keydown', function() {
  document.body.classList.remove('using-mouse');
});

和css

:focus {
  outline: #08f auto 2px;
}

body.using-mouse :focus {
  outline: none;
}

鼠标焦点没有轮廓，但仍然有键盘焦点的轮廓？

7 个答案:

修改