Highlight tabbed-to element (using jQuery/CSS/anything)

Question

I am trying to test the tabbing on a page but I cannot SEE what I've just tabbed to.

I managed to highlight the input element types text and textarea pretty easily. Radio did not work, but affecting the parent element did work. Here's my jquery:

$(":input").focusin( function() {
    if($(this).attr('type') === 'radio')  {
        $(this).parent().attr('style', 'background-color: yellow !important');
    } else {
        $(this).attr('style', 'background-color: yellow !important');
    }
});
$(":input").focusout( function() {
    if($(this).attr('type') === 'radio')  {
        $(this).parent().css('background-color','');
    } else {
        $(this).css('background-color','');
    }
});

But now I still have some other elements that I'm tabbing to and I cannot even tell what they are. All I know is it takes several tab presses to get from the last radio group to the next "select" element (which I can see is focused even without extra jquery code). After that is a button, which I also would like to be highlighted.

Do I have to list conditions for every single element? Or use a selector like $(":input,:button,[etc]")? Is there some easy way I can just have the element, whatever it is, highlighted after it is tabbed to?

score 3 · Answer 1 · answered Jan 17 '15 at 07:49

You can use the :focus pseudo-class in CSS. It is well supported except IE 7 and older; if you need to support them, use a polyfill like Selectivzr. However, note that :focus matches the focused element, no matter how it reached focus (e.g. via tabbing, via a click, or an invocation of the focus() method).

Example:

<style>
  :focus { outline: solid red } 
</style>
<p><input placeholder="Click me, then tab">
<p><input type=radio>
<p><a href="https://developer.mozilla.org">link</a>
<p contenteditable=true>This is editable and focusable

It's interesting to note that StackOverflow makes liberal use of tabbed-to-element-highlighting. I'll try this. — Buttle Butkus, Jan 19 '15 at 01:00

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

You might want to use tabindex attribute for HTML tags. Here is a SO question: What is the HTML TabIndex

edited May 23 '17 at 12:30

Community

1
1

answered Jan 17 '15 at 00:35

Erdem E.

170
1
5

Highlight tabbed-to element (using jQuery/CSS/anything)

2 Answers2