Question

当您拥有网站和表单时，可以使用键盘选项卡键浏览表单。例如，Google Chrome会为所选项目提供蓝色轮廓。

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：

$(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');
                });
            }
        }
    }
});

JS：

#include <iostream>
#include <map>

template <typename T>
using mm = std::map<T, T>;

int main()
{
  mm<int> i;
  mm<char> c;
}

我没有对此进行过测试，但它应该可行，或者至少，它是您开发所需内容的开始。如果你无法使其发挥作用，不要害怕寻求进一步的帮助。

祝你好运！

如何使用键盘浏览表单来替换边框轮廓？

1 个答案: