使用 JavaScript 以编程方式调度键盘（例如按键）事件

Question

我正在尝试以编程方式为键盘和鼠标事件调度事件。

到目前为止，我尝试过的东西很少。 现在我能够以编程方式调度鼠标事件并查看更改：

const element = document.getElementById("element");
const event = new Event('click', {bubbles: true});
element.dispatchEvent(event);

上述方法适用于Mouse Event 。 我已经尝试了以下键盘事件的方法：

const element = document.getElementById("input-element");
const event = new KeyboardEvent('keypress', {'key': 'e'});
element.dispatchEvent(event);

这里似乎正在执行事件，但输入字段中的值并未更新。

Answer 1

当您按下某个键时，会发生许多事件。 它们都不会导致输入值被更改，但您可以使用此函数来近似按下某个键时发生的情况。

 const element = document.getElementById("input-element"); const key = 'e'; var success = triggerKey(key, element); console.log(success?'success':'fail'); function triggerKey(key, element){ if(!/^[az]$/.test(key)) return false; if(!['INPUT','TEXTAREA'].includes(element.tagName)) return false; const events = ['keydown', 'keypress', 'textInput', 'keyup']; events.forEach(event_name=>{ const opts = 'textInput' === event_name ? { inputType: 'insertText', data: key } : { key: key, code: `Key${key.toUpperCase()}` }; const event = 'textInput' === event_name ? new InputEvent('input', opts) : new KeyboardEvent(event_name, opts); element.dispatchEvent(event); if('textInput' === event_name) element.value += key; }); return true; }

 <input id="input-element">