用jquery檢查一個元素是否集中（具有它的輪廓）

我看到處處都找不到答案。我如何檢查某個元素是否聚焦（即輪廓圍繞元素），然後聚焦下一個元素，如果不是，那麼焦點應該保持在哪裏？例如，我有5個表單元素（即輸入，標籤，按鈕等等）的列表;如果第三個元素被聚焦，則將焦點放在第四個元素上，如果不是正常進行。這是當用戶瀏覽使用鍵盤上的Tab鍵的列表和它是被聚焦的標籤：用jquery檢查一個元素是否集中（具有它的輪廓）

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>

我希望我我的代碼正確的方向。

非常感謝

來源

2011-12-20 Shaoz

有兩個部分在此：

首先，你可以使用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

來源

2011-12-20 14:54:53

我知道我們可以使用tabindex屬性等，但我做的事情，需要我使用jquery時，它的上。我必須使用jQuery。那麼解決方案是什麼？ – Shaoz 2011-12-20 15:03:11

但是，當你不需要時爲什麼要使用jQuery？通過簡單地使用html和瀏覽器本身，這是微不足道的。 – 2011-12-20 15:04:49

正如我所說我正在做一些複雜的事情，需要我使用jQuery。爲了簡單起見，我沒有包含我的代碼的其他部分。我想要的是有人幫我在jQuery中做這個，所以我可以繼續... – Shaoz 2011-12-20 15:09:46

用jquery檢查一個元素是否集中（具有它的輪廓）

回答

相關問題