在 JavaScript 中按 Tab 键时在输入元素上调度事件不起作用

Question

I am trying to dispatch tab key Press event pro grammatically on a button click. When the button is clicked, I provided focus for the first input and dispatched key press event with tab key and try to focus the second input. But unfortunately this is not working.

 document.getElementById('btn').addEventListener('click', function() { const input = document.getElementsByTagName('input')[0]; input.focus(); alert('Input 1 focused'); input.dispatchEvent( new KeyboardEvent('keypress', { key: 'tab', code: 'tab', keyCode: 9 }) ); });

 <button id="btn">click</button> <input id="default" tabindex="0" /> <br /> <br /> <br /> <input id="default1" tabindex="0" />

I expect upon button click, the second input should be in focus state since I have dispatched tab keypress there.

Answer 1

The reason for this is that your event is not Trusted. isTrusted property of the event is false. This is a readonly property.

More details you can find here JavaScript trigger an InputEvent.isTrusted = true