Question

我到处寻找但找不到答案。我如何检查某个元素是否被聚焦（即轮廓是在元素周围。），然后聚焦下一个元素，如果没有那么焦点应该保持在原来的位置？例如，我有一个包含5个表单元素的列表（即输入，标签，按钮等...）;如果第3个元素被聚焦，那么将焦点放在第4个元素上，如果没有正常进行。这适用于用户使用键盘上的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

使用jquery检查元素是否已聚焦（具有围绕它的轮廓）

1 个答案: