JavaScript - JQuery - 焦點（）方法 - 無限循環

我試圖建立一個功能，允許兩個按鈕（CodePen下面）之間的鍵盤選項卡。更具體地說，我希望用戶能夠在「button1」標籤上跳轉到「button2」，然後在標籤上跳回到按鈕1.JavaScript - JQuery - 焦點（）方法 - 無限循環

我的解決方案是將一個事件監聽器放在「button1 「並聽取選項卡鍵盤事件。當觸發時，使用JQuery的focus（）方法將焦點轉移到「button2」。在「button2」上有一個相同的監聽器，用於監聽標籤事件並將焦點移回「button1」。

問題是，當我標籤到「button1」時，監聽器記錄焦點和製表符事件，並將焦點移到「button2」，然後記錄焦點和製表符事件並再次將其移回「button1」，創建一個無限循環。

請問如何解決這個問題的建議？

這個的真實世界應用將限制特定模塊或頁面部分中的Tab鍵。

謝謝！史蒂夫

https://codepen.io/steveliu7/pen/WOoMJY

var $button1 = $('.b1'); 
var $button2 = $('.b2'); 

var checkButton = function(event) { 
if ($button1.is(':focus') && event.which === 9){ 
    console.log($(this)) 
    $('.b2').focus(); 
    return; 
}; 

if ($button2.is(':focus') && event.which === 9){ 
    console.log($(this)) 
    $('.b1').focus(); 
    return; 
}; 
} 

$('button').on('keydown', checkButton);

來源

2017-06-16 Steve Liu

也許你可以調用焦點之前設置一個布爾值（），並且如果設置了其他按鈕，不要運行該事件？ – xunatai

您正在使用錯誤的事件。你想捕獲keydown或按鍵。檢查鍵碼的事件處理程序，如果它是製表鍵，則使用焦點。 – Bindrid

感謝您指出！我已經更新了代碼。問題仍然是當我在「button1」上觸發事件時，「button2」上的事件也會被觸發。 –

你想限制兩個按鈕之間的標籤導航。

請注意，它不會限制screenreaders導航到這兩個按鈕。

你必須考慮TAB導航也Shift + Tab鍵導航

上來看event.preventDefault()純技術角度是什麼你正在尋找：

var checkButton = function(event) { 
    if (event.which === 9) { 
    if ($button1.is(':focus')) { 
     $button2.focus(); 
     event.preventDefault(); 
    } else if ($button2.is(':focus')){ 
     $button1.focus(); 
     event.preventDefault(); 
    } 
    } 
}

來源

2017-06-16 07:45:45 Adam

我想你正在嘗試做的，可以實現與HTML的tabindex物業要容易得多。如果您只想限制標籤到某些元素，您可以爲tabindex="-1"設置那些您不想要關注的元素。

來源：https://www.w3schools.com/tags/att_global_tabindex.asp

來源

2017-06-16 01:00:26

JavaScript - JQuery - 焦點（）方法 - 無限循環

回答

相關問題