Checking if a element is focused (has outline around it) with jquery

Question

I've looked everywhere but cannot find an answer. How can I check that if a certain element is focused (i.e. outline is around the element.), then focus the next element, if not then the focus should stay where it is? For example I have a list of 5 form elements (i.e. input, label, button, etc...); if the 3rd element is focused then put focus on the 4th element, if not carry on as normal. This is for when the user navigates through the list with the tab key on the keyboard and it's the label that gets focused:

JS:

var thisElem = $(this),
    viewport = thisElem.find('.expand-viewport'),
    viewportHeight = viewport.height(),
    wrapper = viewport.find('ul.expand-wrapper'),
    wrapperLi = wrapper.find('li'),
    liLen = wrapperLi.length,
    numShown = thisElem.find('[data-view="showhide"]').data('showalways');

for (var i = 0; i < liLen; i += 1) {

  if ($(wrapperLi[i]).eq(numShown - 1).children('label').is(':focus')) {     
    $(wrapperLi[i]).eq(numShown - 1).next().children('label').focus();
    console.log('go to label in next li item');                
  } else {
      thisElem.children('label').focus();
  }

}

HTML:

<div id="features" class="expand-viewport">
        <ul class="expand-wrapper">
            <li>
                <input type="checkbox" value="Smartphone (36)" id="featureSmartPhone" name="featureSmartPhone" />
                <label for="featureSmartPhone">Smartphone (36)</label>
            </li>
            <li>
                <input type="checkbox" value="3G (42)" id="feature3g" name="feature3g" />
                <label for="feature3g">3G (42)</label>
            </li>
            <li>
                <input type="checkbox" value="Bluetooth (63)" id="featureBluetooth" name="featureBluetooth" />
                <label for="featureBluetooth">Bluetooth (63)</label>
            </li>
            <li>
                <input type="checkbox" value="Camera (64)" id="featureCamera" name="featureCamera" />
                <label for="featureCamera">Camera (64)</label>
            </li>
            <li>
                <input type="checkbox" value="Email (63)" id="featureEmail" name="featureEmail" />
                <label for="featureEmail">Email (63)</label>
            </li>
        </ul>
        <a href="#less" class="more" data-moreorless="true">More</a>
    </div>

I hope I'm on the right direction with my code.

Many thanks

Dominic Goulet · Accepted Answer · 2011-12-20 14:54:53Z

4

There are two parts in this :

First of all, you can use tabindex="0" to set the tabbing order, and can bypass a label.

Also, disabled elements do not receive tab attention, so you can use that.

This is easier to handle tabs that way than use jQuery as you do.

References :

http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex http://www.w3.org/TR/html4/interact/forms.html#disabled

answered Dec 20, 2011 at 14:54

Dominic Goulet

8,1437 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shaoz Over a year ago

I know we can use tabindex, etc but I'm doing something that requires me to use jquery when it's on. I have to use jquery. So what's the solution?

Dominic Goulet Over a year ago

But why would you want to use jQuery when you don't have to? This is trivial to go by using simply html and the browser itself.

Shaoz Over a year ago

As I said I'm doing something complex that requires me to use jquery. I haven't included the other parts of my code for simplicity. All I want is someone to help me do this in jquery, so I can carry on...

Collectives™ on Stack Overflow

Checking if a element is focused (has outline around it) with jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related