在前端开发中，我们经常需要测试用户交互行为和事件触发。为了达到这个目的，我们可以使用模拟输入来帮助我们生成测试数据。另外，在自动化测试中，也需要使用模拟输入来模拟用户的操作。
本文将介绍如何使用jQuery或纯JavaScript模拟键盘输入。让我们开始吧！
模拟按键事件
要模拟按键事件，我们需要使用KeyboardEvent对象。该对象有以下几个属性：
key: 表示按下的键的名称keyCode: 表示按下的键的代码值shiftKey: 是否按下 Shift 键ctrlKey: 是否按下 Ctrl 键altKey: 是否按下 Alt 键metaKey: 是否按下 Meta 键
以下是一个示例代码，它会在页面加载时模拟按下 A 键：
-- -------------------- ---- ------- --- ----- - --- ------------------------ - ---- ---- -------- --- --------- ------ -------- ------ ------- ------ -------- ----- --- ------------------------------
上述代码中，我们创建了一个名为event的新KeyboardEvent对象，并设置其键名称、键代码值和其他属性。然后，我们通过调用document.dispatchEvent(event)方法来触发该事件。
模拟输入文本
要模拟输入文本，我们需要使用InputEvent对象。该对象有以下几个属性：
data: 要输入的文本inputType: 输入类型（例如: insertText、deleteContentBackward）isComposing: 是否正在组合字符
以下是一个示例代码，它会在文本框中模拟输入文本：
-- -------------------- ---- ------- --- ----- - -------------------------------- -------------- --- ----- - --- ------------------- - ----- ------- -------- ---------- ------------- ------------ ----- --- ---------------------------
上述代码中，我们首先获取了页面中的一个<input>元素，并调用其focus()方法以确保它获得焦点。然后，我们创建了一个名为event的新InputEvent对象，并设置其要输入的文本和其他属性。最后，我们通过调用input.dispatchEvent(event)方法来触发该事件。
示例应用
下面是一个示例应用场景：假设我们需要测试一个表单提交功能，并且需要检查用户是否成功按下了“提交”按钮。为了模拟这个行为，我们可以使用以下代码：
-- -------------------- ---- ------- --- ------ - --------------------------------- --------------- --- ------ - --- ------------------------ - ---- -------- -------- --- --------- ------ -------- ------ ------- ------ -------- ----- --- --- ------ - --- ------------------- - -------- ---- --- ----------------------------- -----------------------------
上述代码首先找到了一个页面中的“提交”按钮，并调用了它的focus()方法以确保它获得焦点。然后，我们创建了一个名为event1的新KeyboardEvent对象，该对象表示按下 Enter 键。接着，我们创建了一个名为event2的新MouseEvent对象，该对象表示单击鼠标左键。最后，我们通过调用button.dispatchEvent(event1)和button.dispatchEvent(event2)方法来触发这两个事件。
结论
在本文中，我们学习了如何使用jQuery或纯JavaScript模拟输入事件。无论是在自动化测试还是在前端开发中，这些技术都可以帮助我们更好地测试交互行为和事件触发，从而提高应用程序的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24143