如何对HTML元素执行键盘输入操作？

原生JavaScript前端场景 #

如果是在前端业务代码中实现输入操作，可根据需求选择以下两种方案：

• 直接修改输入框内容（最常用，适配绝大多数普通输入场景）

// 获取目标可输入元素，比如文本输入框
const inputEl = document.querySelector('input[type="text"]');
// 追加输入字母a
inputEl.value += 'a';
// 手动触发input事件，保证输入框绑定的监听逻辑可以正常响应
inputEl.dispatchEvent(new Event('input', { bubbles: true }));

• 模拟完整键盘事件流程（适用于需要触发keydown/keypress/keyup监听的特殊场景）

const inputEl = document.querySelector('input[type="text"]');
// 先聚焦输入框，保证键盘事件可以被元素捕获
inputEl.focus();

// 触发按下a键事件
inputEl.dispatchEvent(new KeyboardEvent('keydown', {
  key: 'a',
  code: 'KeyA',
  keyCode: 65,
  bubbles: true
}));
// 触发按键按压中事件
inputEl.dispatchEvent(new KeyboardEvent('keypress', {
  key: 'a',
  code: 'KeyA',
  keyCode: 65,
  bubbles: true
}));
// 触发松开a键事件
inputEl.dispatchEvent(new KeyboardEvent('keyup', {
  key: 'a',
  code: 'KeyA',
  keyCode: 65,
  bubbles: true
}));

自动化测试/爬虫工具场景 #

如果是在自动化工具中模拟用户输入，常用工具的实现方法如下：

• Selenium（Python版本）：调用send_keys方法实现输入

from selenium import webdriver

driver = webdriver.Chrome()
input_el = driver.find_element('css selector', 'input[type="text"]')
# 输入字母a
input_el.send_keys('a')

• Playwright（Python版本）：调用fill或press方法实现输入

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    input_el = page.locator('input[type="text"]')
    # 方案1：直接填充内容
    input_el.fill('a')
    # 方案2：模拟单键按下
    input_el.press('a')

提示：如果需要触发全局键盘事件不需要绑定特定输入框，可把事件触发对象替换为document或window，对应自动化工具也支持全局按键调用。

内容的提问来源于stack exchange，提问作者Tocko73