[英]How to simulate keyboard press “full stack” with JS?
我已经阅读并尝试了这个问题的解决方案,但它们都没有像我预期的那样工作。
在下面的代码片段中,我注册了两个事件侦听器,并看到两个回调都作为对input
和document
上的keydown
事件的响应而触发。
但是,我的期望是,当这行代码运行时,会在输入中输入一个额外的文本, a
.
input.dispatchEvent(keyEvent);
换句话说,我希望使用KeyboardEvent
作为参数在input
元素上调用dispatchEvent
应该将文本添加到输入中,但它不会。
它确实调用了在 eventListener 中注册的回调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="input">
<script>
const input = document.getElementById('input')
input.addEventListener('keydown', (e) => {
console.log('Keydown on Input: ', e.key)
})
document.addEventListener('keydown', (e) => {
console.log('Keydown on Doc: ', e.key)
})
function focusInputThenFireEventKeyboardEvents() {
input.value = 'I want '
input.focus()
input.dispatchEvent(new Event('focus'));
input.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
input.dispatchEvent(new KeyboardEvent('keydown',{'key':'a'}));
var keyEvent = new KeyboardEvent("keydown", { key: "a", char: "a", shiftKey: true });
var keyEvent2 = new KeyboardEvent("keydown", { key: "d", char: "d", shiftKey: true });
input.dispatchEvent(keyEvent);
document.dispatchEvent(keyEvent2);
}
setTimeout(focusInputThenFireEventKeyboardEvents, 500)
</script>
</body>
</html>
您可以在此处查看文档 - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent表示键盘事件表示用户与键盘上的键的交互,并且为了处理您需要使用的文本输入输入事件。 即使您调度像 const input.dispatchEvent(new Event("input", {"bubbles":true, "cancelable":false})) 这样的事件,这并不意味着它会更改输入,但您可以使用它来以编程方式设置输入的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.