在一個表單的輸入之間進行TAB鍵循環

我在一頁上有一些<form>元素，如2-3表單。如何在一個表格的輸入之間循環制作TAB鍵開關，而不是在達到一個表格的最後一個輸入時轉到下一個表格？在一個表單的輸入之間進行TAB鍵循環

2014-07-09 Sergei Basharov

嘗試使用[tabindex屬性（HTTP： //www.w3schools.com/tags/att_global_tabindex.asp） –

我相信這是你在找什麼

window.onload = function() { 
    var i, f = document.getElementsByTagName("FORM"); 
    for(i = 0; i < f.length; i++){ 
     (function(i){ 
     f[i].elements[f[i].length-1].onkeydown = function(e) { 
      var keyCode = e.keyCode || e.which; 
      if(keyCode == 9) { 
       f[i].elements[0].focus(); 
       e.preventDefault(); 
      } 
     }; 
     })(i); 
    } 
};

檢查工作jsFiddle

來源

2014-07-09 15:26:42 hex494D49

-1

<element tabindex="number">

非常直接的實現。

來源

2014-07-09 14:10:02 redditor

請認真閱讀問題。 –

@SergeyBasharov 1.我在回答後編輯了您的問題。我沒有看到tabindexing無法正常工作的原因。發佈代碼示例。謝謝。 – redditor

通過編輯我剛纔說明了一點，我想在一個表單的元素之間循環，而不是在頁面上所有表單的輸入之間循環。您建議的解決方案從頁面上的第1個元素到第n個元素，而不是形式。所以，當我按Tab鍵在一個表單的最後一個輸入時，下一個輸入不是這個表單的第一個輸入，而是tabindex大於這個表單最後一個輸入的下一個表單的第一個輸入。 –

首先你不應該這樣做，因爲這不是用戶期望的。

如果你真的需要你必須在你的最後一個表單元素上放一個關鍵的偵聽器，並檢查用戶是否按下了這個選項卡，那麼你將焦點放在第一個元素上。

下面是基於您的jsfiddle爲例http://jsfiddle.net/VnRBL/1/

$('#last').on('keydown', function (evt) { 
    if(evt.keyCode === 9) { // Tab pressed 
     evt.preventDefault(); 
     $('#first').focus(); 
    } 
});

來源

2014-07-09 14:32:26 Gpx

這是完美的。謝謝！注意：這個代碼片段放在'$（document）.ready（function（）{'部分。 – modle13

或者你可以在'' – Gpx

在一個表單的輸入之間進行TAB鍵循環

回答

相關問題