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 回答
3

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;
}
于 2013-08-01T17:38:22.380 回答
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;
}

我还用一些演示写了一篇更详细的帖子，以防您需要更多信息。

于 2018-05-28T17:26:31.177 回答
1

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

$('#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/

于 2013-08-01T17:35:56.193 回答
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 回答
0

如果用户当前正在使用鼠标或键盘，您可以将类添加到 body 以了解 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;
}
于 2019-03-28T23:03:30.857 回答
0

基于@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;
}
于 2016-08-04T08:38:09.733 回答