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

Question

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

到目前为止，我尝试过的事情很少。现在我可以用程序调度鼠标事件，并看到变化：

const element = document.getElementById("element");
const event = new Event('click', {bubbles: true});
element.dispatchEvent(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(!/^[a-z]$/.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">