html - 如何通过使用键盘在表单中导航来用边框替换轮廓？

Question

当您有一个网站和一个表单时，您可以使用键盘上的 Tab 键在表单中导航。例如，谷歌浏览器将为所选元素提供蓝色轮廓。

HTML

<form method="" action="">
  <input type="text" tabindex="1">
  <input type="text" tabindex="2">
  <input type="submit" tabindex="3">
</form>

CSS

input:focus {
  outline: none;
  border: 1px solid blue;
}

参见 FIDDLE .

这工作正常，但我仅希望在用户使用键盘导航时应用它。当正常专注于输入时，我希望边框消失。

所以我在 CSS 中想要的是以下内容(不工作):

input:navigatedbytabkey { ... }

有人知道好的解决方案吗？

Answer 1

你不能用纯 CSS 做到这一点，但你仍然可以用 javascript/Jquery 做到这一点。

您可以做的是为 Tab 键按下设置一个事件监听器，并在该事件上检查哪个元素获得焦点，如果它在您的表单内，则突出显示它。我发现使用类而不是直接应用 css 来突出显示它更好。

我会使用 JQuery，因为它可以节省很多宝贵的时间。

CSS:

.tab-focused{
    //HERE COMES YOUR ON-TAB-FOCUS STYLING
}

JS:

$(document).ready(function(){
    $(window).keyup(function(e){//this listens for any key being presssed
        if(e.keyCode==9){//this checks that the key pressed is tab
            var focusedElement = $(':focus');
            if (focusedElement.parents('form').length){//check if the focused element is inside the form
                focusedElement.addClass('tab-focused');
                //This still has one problem. When you get out of an element, it's class is not being removed. So, let's add another event to detect whenever they lose focus(blur)
                focusedElement.one('blur',function(){
                    $(this).removeClass('tab-focused');
                });
            }
        }
    }
});

我还没有测试过这个，但它应该可以工作，或者至少，它是你开发你想要的东西的一个开始。如果您无法让它发挥作用，请不要害怕寻求进一步的帮助。

祝你好运!