使用Tab鍵將焦點從數據網格移動到下一頁元素

Question

使用AG-Grid，我需要能夠按下Tab鍵並使焦點元素從當前選定的網格/單元更改為網格外部頁面上的下一個元素。 問題在於，Tab鍵似乎已鎖定在網格內，並且不會移到數據表之外到下一個元素。

我在存儲最后一個關注的單元格的單元格上有一個偵聽器（用於存儲最后一個位置，以便能夠跳回到先前關注的單元格的網格中），但是需要將下一個關注的單元格置於數據之外網格：

const cells = document.getElementsByClassName('ag-cell');
[...cells].map(cell => {
  cell.addEventListener("keydown", function(e) {
    if(e.key === "Tab") {
      let lastCell = cell.attributes[2].value;
      console.log("Last Cell Focused: ", lastCell)
    }
  })
})

如何將焦點選擇從按鍵上的網格移至下一個可聚焦頁面元素？

這是當前網格的plnkr鏈接： 鏈接

================================================== ===

更新

我已經更新了代碼，現在不再在每個單元格上附加事件偵聽器，而是在文檔上查找觸發的事件。 但是，我仍然遇到一個問題，即它沒有獲取last_cell值，並且看到hasFocusVisible上的focus-visible類。

//on arrow right if last_call === header that has 'focus-visible', set focus to first cell in body
const headerCells = document.getElementsByClassName('ag-header-cell-label');
const last_cell = headerCells[headerCells.length-1].attributes[2];
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
document.addEventListener("keydown", function(e) {
  if(e.key === "ArrowRight") {
    // if(hasFocusVisible && last_cell) {
      console.log("EVENT TRIGGERED FROM: ", event.target, "Last Cell Value: ", last_cell, hasFocusVisible);
      //if last_call and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
      const bodyCell = document.getElementsByClassName('ag-cell')[0];
    // }
  }
});

更新的Plnkr： 鏈接

================================================== ==

更新2

我已經將元素選擇器更新為以下內容：

const last_cell = document.querySelector('.ag-header-cell:last-child');
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('.focus-visible');
document.addEventListener("keydown", function(e) {
  console.log('document.activeElement', document.activeElement)
  const activeElement = document.activeElement;
  if(e.key === "ArrowRight" && activeElement) {
    if(last_cell) {
      console.log("EVENT TRIGGERED FROM: ", event.target, "Last Cell Value: ", last_cell, hasFocusVisible);
      //if last_call and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
      const bodyCell = document.getElementsByClassName('ag-cell')[0];
    }
  }
  else if(e.key === "ArrowDown"){
    //look for first child in first row with same id as header and set focus
    document.querySelector('.ag-cell').focus();
  }
});

但是，當注銷具有焦點可見類的div時， hasFocusVisible變量始終hasFocusVisible false 。 我不確定我的邏輯是否正確，或者在觸發事件偵聽器時，它無法在ag-header-cell-label上獲得focus-visible類。

Answer 1

如果tab在這些單元格中起作用，則不要在每個單元格中添加一個偵聽器，只需在文檔中添加一個，然后將其手動移至頁面上接下來要知道的任何位置即可。 例如：

 var b = document.querySelector('button'); b.passThrough = true; b.update = pass => { b.passThrough = pass; b.textContent = "click me to " + (b.passThrough ? "block" : "allow") + " tabbing"; } b.addEventListener('click', e => b.update(!b.passThrough)); b.update(b.passThrough); var focussable = Array.from( document.querySelectorAll([ 'button', '[href]', 'input', 'select', 'textarea', '[tabindex]:not([tabindex="-1"])' ].join(',')) ); // let's pretend this is your last cell. var p = document.querySelector('p'); // make it kill off keydown events, BUT, also have it redirect focus // to "the next focussable element", so you can see what that code looks like. p.addEventListener('keydown', e => e.preventDefault()); document.addEventListener('keydown', e => { if (b.passThrough && e.target === p) { var next = focussable.indexOf(p) + 1; focussable[next % focussable.length].focus(); } }); 

 <button>toggle</button> <p tabindex=0>first</p> <a href="#top">second</a> <a href="#top">third</a> 

運行此代碼段，單擊按鈕，單擊選項卡，注意選項卡事件現在已被捕獲（就像在單元格中一樣）。 現在，再次單擊按鈕，單擊選項卡，再次單擊選項卡：請注意， 似乎事件不再被捕獲，而實際上卻是：元素本身的事件已被終止，但是文檔的事件偵聽器現在明確為我們轉移焦點。