使用 tabindex 进行控制的 Chrome 蓝色轮廓

Question

我有一个带有 tabindex 属性的下拉菜单。

当我使用 chrome 在其上单击鼠标时，下拉菜单周围会出现蓝色轮廓。

如果我取消“tabindex”属性，它不会发生，但我没有此控件的 tabindex。

如果我使用 css 取消大纲：

*:focus  
{  
    outline: none;  
}  

它也可以，但是在使用选项卡移动时我没有得到轮廓（并且没有迹象表明该控件已获得焦点）。

有没有办法让这个大纲只在使用“tab”而不是在每次鼠标点击时显示？

Answer 1

我能想到的最简单的方法是编写自己的大纲样式。这可以很容易地应用于任何元素。

CSS：

.input {
    border-radius:7px;
    border:1px solid #ccc;
    outline:none;
}
.focused {
    border:1px solid #55d;
}

jQuery（因为 onfocus 有关于在MDN page 中无法正常工作的注释）：

$('input').focus(function () {
    $(this).addClass('focused');
});
$('input').blur(function () {
    $(this).removeClass("focused");
});

如果你真的需要它在点击时不显示，你需要这样的东西：

var clicked = false; //hold whether or not we have a click
$('input').click(function () { // if they click, flag it.
    clicked = true;
    $(this).removeClass('focused'); //remove the focus class in case it got set-see note.
    setTimeout(function() { // remove the click flag after 1/5th of a second.
        clicked = false;
    }, 200);
});

$('input').focus(function () { // when it gets focused, handle it.
     handle_it(this);
});

function handle_it(e){
   setTimeout(function() { // wait a bit, then check for the flag.
        if (clicked === false) { // they didn't click.
            $(e).addClass('focused');
        }
    }, 150); // you may need to tweak this value. 150 was right for opera, see note
}

$('input').blur(function () { // remove the focus
    $(this).removeClass("focused");
});

注意：focus 应用在 click 之前，无论处理程序放置在何处（至少，这是我在 jQuery1.11 中找到的）。这意味着如果您想先应用点击，则必须延迟 focus。 150 毫秒对于歌剧来说是合适的，否则你会得到一个专注的风格。这就是我们在点击处理程序中删除该类的原因。

如果你使用这种方法，你还可以使用阴影和淡入淡出以及各种漂亮的东西来让它漂亮。

显然您应该使用比'input' 更具体的选择器。

小提琴：https://jsfiddle.net/gypvpvr7/1/