web component - Simulating a Tab Key Press using Plain JavaScript Supporting Shadow DOM - Stack Overflow

admin管理员组

文章数量:1350023

Note: Existing questions exists here and elsewhere but they are all jQuery specific and there is no canonical answer covering plain JavaScript, including support for web ponents.

I'd like to simulate a tab key press so that the focus is shifted to the next element in the tab order. The next element could be any HTML focusable HTML element or an element with tabindex="0". This also needs to work where some descendant HTML elements could be custom web ponents with shadow DOM's.

The potential solution could be to fire a key down event or iterating over descendant nodes looking for one that is focusable.

Note: Existing questions exists here and elsewhere but they are all jQuery specific and there is no canonical answer covering plain JavaScript, including support for web ponents.

I'd like to simulate a tab key press so that the focus is shifted to the next element in the tab order. The next element could be any HTML focusable HTML element or an element with tabindex="0". This also needs to work where some descendant HTML elements could be custom web ponents with shadow DOM's.

The potential solution could be to fire a key down event or iterating over descendant nodes looking for one that is focusable.

• javascript
• web-ponent
• shadow-dom
• tabindex
• focusable

Share Improve this question Follow edited Sep 30, 2022 at 11:25 Muhammad Rehan Saeed asked Sep 30, 2022 at 11:02 Muhammad Rehan SaeedMuhammad Rehan Saeed 38.6k4848 gold badges219219 silver badges328328 bronze badges 1

• 4 I've tried the solutions in the post linked in particular and some derivatives. Also tried selecting the first descendant with a tabindex greater than -1. There is no canonical answer for this on StackOverflow which seems like a glaring omission for what seems a mon technical question. The whole point of this site is to answer dev questions and help me "do my job". Nothing wrong with that. – Muhammad Rehan Saeed Commented Sep 30, 2022 at 13:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I've tried to make the keyboard events work but sadly I can't get it to work nicely. Based on the docs I believe it the correct way to do it would be:

document.activeElement.dispatchEvent(new KeyboardEvent("keypress", { 
    key: "Tab" 
}));

// -----------------------------------------------------
// Find all the elements that have a tabindex set, 
// I would keep this file scoped for performance sake
// ------------------------------------------------------
const tabElements = Array.from(document
    // Get all elements that can be focusable
  .querySelectorAll('a, button, input, textarea, select, details, [tabindex]'))
  
  // remove any that have a tabIndex of -1
  .filter(element => element.tabIndex > -1)
  
  // reverse, then sort by tabIndex descending to put 0s last but maintain original order
  .reverse().sort((a, b) => a.tabIndex > b.tabIndex ? -1 : 1)

then selecting the next element:

// ------------------------------------------------------------------------------
// Method to find the next element to focus and change the focus to that element
// ------------------------------------------------------------------------------
const DispatchTab = () => {

    // If the current focused element is a -1 then we wont find the index in the elements list, got to the start
    if (document.activeElement.tabIndex === -1) {
    tabElements[0].focus();
    return;
  }

    // find the current index in the tab list of the currently focused element
    const currentIndex = tabElements.findIndex(e => e === document.activeElement);

  // get the next element in the list ("%" will loop the index around to 0)
  const nextIndex = (currentIndex + 1) % tabElements.length;
  tabElements[nextIndex].focus();
}

I have created a JS fiddle with an approach that doesn't use the KeyboardEvent at all. It might need tweaking to your liking but should do the job. I feel Tab Example

本文标签： web componentSimulating a Tab Key Press using Plain JavaScript Supporting Shadow DOMStack Overflow