javascript - 使用 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"来设置Tab键顺序，并且可以绕过标签。

此外，disabled 元素不会受到选项卡关注，因此您可以使用它。

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

引用文献:

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