用jQuery检查元素是否集中（周围有轮廓）

Question

我到处都看过，但找不到答案。 我如何检查某个元素是否被聚焦（即轮廓围绕该元素），然后聚焦下一个元素，如果不聚焦，则焦点应保持在原位置？ 例如，我有一个5个表单元素的列表（即输入，标签，按钮等）； 如果第三个元素被聚焦，则将焦点放在第四个元素上，如果不能正常进行。 当用户使用键盘上的Tab键在列表中导航时，它就是重点关注的标签：

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>

我希望我的代码朝正确的方向发展。

非常感谢

Answer 1

这包括两个部分：

首先，您可以使用tabindex="0"来设置制表顺序，并且可以绕过标签。

同样， disabled元素也不会引起制表符的注意，因此您可以使用它。

这种方式比使用jQuery更容易处理选项卡。

参考文献：

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