使用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