javascript - 使用 Shift + Tab 将焦点设置在存储的上一个元素上

Question

我正在尝试使用Shift+Tab键将焦点设置回先前聚焦的页面元素，以将焦点设置在数据网格中先前聚焦的元素上，无论是标题单元格还是正文单元格。它目前正在将焦点推回标题单元格，我怀疑是因为它们有一个标签索引。我正在使用以下应该寻找存储的先前活动元素，并将focus-visible类应用回它：

document.querySelector('.ag-body').tabIndex=0;

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 9 && e.shiftKey == true) {
    let currentFocusedElement = event.srcElement;
    let compId = currentFocusedElement.getAttribute("comp-id");
    currentFocusedElement.classList.add('focus-visible');
    console.log("Shift + Tab currently focused on: ", currentFocusedElement)
    let bodyFocused = document.querySelector('.ag-body').classList.contains('focus-visible');
    console.log("Previously focused element", currentFocusedElement)
    if(bodyFocused == true){
      currentFocusedElement.classList.add('focus-visible');
    }
  }
  else if(e.key === "ArrowRight"){
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    const headerCell = document.querySelector('.ag-header-cell:last-child').children[1].children[1];
    const hasFocusVisible = document.activeElement.classList.contains('focus-visible');
    if(lastHeaderCell === true) {
      document.querySelector('.ag-cell').focus();
      lastHeaderCell = false;
    }
    else if(headerCell.classList.contains('focus-visible')) {
      lastHeaderCell = true;
    }
  }
  else if(e.key === "ArrowDown"){
    //get column id on arrowdown
    let cellHeaderId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    document.querySelector('.ag-cell[col-id="' + cellHeaderId + '"]').focus();
  }
  else if(e.key === "ArrowUp") {
    //store value of grid cell column id
    let cellId = document.activeElement.getAttribute("col-id");
    let rowId = document.activeElement.parentElement.getAttribute("row-id");
    //set focus to column header if active cell is in first row and remove body cell focus
    if(rowId === "0"){
      document.querySelector('.ag-cell[col-id="' + cellId + '"]').classList.remove('ag-cell-focus');
      document.querySelector('.ag-header-cell[col-id="' + cellId + '"] .ag-header-cell-label').focus();
    }
  }
  else if(e.key === "Tab"){
    let header = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
    console.log("Header has focus visible: ",header)
    //store currently focused cell on tab
    let currentFocusedElement = event.srcElement;
    let compId = currentFocusedElement.getAttribute("comp-id");
    console.log("Currently Stored Cell: ",compId);
    console.log("Currently Focused Element: ",currentFocusedElement)
    //removes focus from current cell
    document.activeElement.blur();
    console.log("Active Element was: ", document.activeElement)
    if(header == true) {
      document.querySelector('.ag-header-cell').tabIndex = -1;
      document.querySelector('.ag-cell[col-id="' + compId + '"]').classList.add('ag-cell-focus');
    }
  }
});

链接到当前状态：Plnkr

标签： javascriptkeypressag-grid