CODEWITHSUNDEEP
javascriptjqueryhtml
Shaoz
Shaoz

Reputation: 10653

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

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

Upvotes: 0

Views: 452

Answers (1)

Dominic Goulet
Dominic Goulet

Reputation: 8113

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

Upvotes: 4

Related Questions