1

I need to change the behaviour of 'enter' to act like 'tab' in the browser. I have tried this code to trig another event in the enter event callBack.

const callBack = (e) => {

    if (e.keyCode === 13) {

      e.preventDefault();
      e.stopPropagation();
     
      document.dispatchEvent(
        new KeyboardEvent("keydown", {
          key: "Tab",
          keyCode: 9, // example values.
          code: "Tab", // put everything you need in this object.
          which: 9,
          shiftKey: false, // you don't need to include values
          ctrlKey: false, // if you aren't going to use them.
          metaKey: false, // these are here for example's sake.
        })
      );
    }
document.addEventListener("keydown", callBack, false);

as I see console.log this code fire tab event but in the browser, the focus doesn't change as I expect to behave like pressing tab key.

any idea?

morteza
  • 718
  • 1
  • 9
  • 14
  • You know you can just call focus() to set focus to the next element? – Tom Mettam Aug 10 '20 at 09:43
  • 1
    This is very difficult to do as most browsers will deliberately prevent the 'hijacking' of shortcuts and events as a security measure. For example if you prevented backspace from firing and disabled the mouse click event you'd have trapped your user! Your best bet is to simulate the outcome rather than alter it at an event level. – Mark Taylor Aug 10 '20 at 09:56
  • @TomMettam the problem is we can change focus inside of an input when the input type is date – morteza Aug 10 '20 at 10:32

0 Answers0