dispatchEvent doesn't work for Enter > Tab simulation

Question

I want to fire a Tab keyboard event when Enter is pressed.

What am I doing wrong? I followed this explanation.

function enterToTab(e) {
    if (e.key == "Enter") {
        console.log(e.key);
        e.target.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab" }));
    }
}

Is this for an input or textarea? There are other ways to insert a tab instead of simulating a keypress. — kelsny, Sep 13 '22 at 15:46
I want to achieve the tab behavior somehow. My idea was to do it this way. I'd love to hear another approach. — Ivan, Sep 13 '22 at 15:53
You can take a page out of this book: https://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea — kelsny, Sep 13 '22 at 15:53
It's more of the same explanation. I've read all of them, and it doesn't work. — Ivan, Sep 13 '22 at 15:58

score 0 · Answer 1 · answered Sep 13 '22 at 16:11

The solution seems to be working, there has to be something special in your case.

let div = document.querySelector("#main");

div.addEventListener("keydown", (e) => {
  if (e.key === "Tab") {
    if (e.target.style.background === "lightblue") {
      e.target.style.background = "pink"
    } else {
      e.target.style.background = "lightblue"
    }
  }
})

function enterToTab(e) {
  if (e.key == "Enter") {
    div.dispatchEvent(new KeyboardEvent("keydown", {
      key: "Tab"
    }));
  }
}

document.addEventListener("keydown", enterToTab)

#main {
  width: 200px;
  height: 200px;
  background: lightblue;
}

<div id="main"> mouse click here then press Enter </div>

dispatchEvent doesn't work for Enter > Tab simulation

1 Answers1