如何使用dispatchEvent()修改input标签的按键输入内容？

我有一个HTML输入框，希望在输入框获得焦点时，用户按下特定按键/组合键后，在光标位置插入另一个字符。比如我的网站有兼容英文键盘的法语虚拟键盘，想让用户通过自定义快捷键输入带重音的法语字符。请问如何用ES6的dispatchEvent和KeyboardEvent对象实现这个功能？

我的尝试代码（JIS布局键盘） #

JavaScript代码 #

let isShiftPressed = false;
let isControlPressed = false;
let isNonConvertPressed = false;
let isConvertPressed = false;

const kbdDown = function(event) {
  if (event.code === "ShiftLeft" || event.code === "ShiftRight") {
    isShiftPressed = true;
  }
  if (event.code === "ControlLeft" || event.code === "ControlRight") {
    isControlPressed = true;
  }
  if (event.code === "NonConvert" || event.code === "NonConvert") {
    isNonConvertPressed = true;
  }

  console.log("{ code : " + event.code + ", key : " + event.key + "}");

  if (event.code === "KeyA" && isShiftPressed && isNonConvertPressed) {
    event.preventDefault();

    const keyPressedEvent = new KeyboardEvent("keydown", {
      key: "X",
      code: "KeyX"
    })

    event.target.dispatchEvent(keyPressedEvent);
  }
}

const kbdUp = function(event) {
  if (event.code === "ShiftLeft" || event.code === "ShiftRight") {
    isShiftPressed = false;
  }
  if (event.code === "ControlLeft" || event.code === "ControlRight") {
    isControlPressed = false;
  }
  if (event.code === "NonConvert" || event.code === "NonConvert") {
    isNonConvertPressed = false;
  }
}

const registerkbdHandler = function(element) {
  element.addEventListener("keydown", kbdDown);
  element.addEventListener("keyup", kbdUp);
}

registerkbdHandler(document.querySelector("input"));

HTML代码 #

<input type="text">

控制台输出 #

当聚焦输入框并按下NonConvert + Shift + A组合键时，控制台输出：

{ code : NonConvert, key : NonConvert} script.js:21
{ code : ShiftLeft, key : Shift} script.js:21
{ code : KeyA, key : A} script.js:21
{ code : KeyX, key : X}

键盘事件已触发，但输入文本框中并未显示新字符。

问题原因及解决方案 #

原因 #

手动通过dispatchEvent触发的KeyboardEvent不会让浏览器自动执行字符输入的默认行为——浏览器的原生输入逻辑绑定在真实硬件键盘事件上，模拟的事件无法触发这一内部流程。

正确实现方式 #

直接操作输入框内容，结合光标位置插入目标字符，无需模拟键盘事件：

修改kbdDown函数中的快捷键处理部分：

if (event.code === "KeyA" && isShiftPressed && isNonConvertPressed) {
  event.preventDefault();
  const input = event.target;
  const insertChar = "X"; // 可替换为需要的法语带重音字符，比如"é"

  // 获取当前光标位置
  const startPos = input.selectionStart;
  const endPos = input.selectionEnd;
  const currentValue = input.value;

  // 拼接新内容：前半部分 + 插入字符 + 后半部分
  input.value = currentValue.substring(0, startPos) + insertChar + currentValue.substring(endPos);

  // 将光标移动到插入字符的后方
  input.selectionStart = input.selectionEnd = startPos + insertChar.length;
}

修改后的完整JavaScript代码 #

let isShiftPressed = false;
let isControlPressed = false;
let isNonConvertPressed = false;
let isConvertPressed = false;

const kbdDown = function(event) {
  if (event.code === "ShiftLeft" || event.code === "ShiftRight") {
    isShiftPressed = true;
  }
  if (event.code === "ControlLeft" || event.code === "ControlRight") {
    isControlPressed = true;
  }
  if (event.code === "NonConvert" || event.code === "NonConvert") {
    isNonConvertPressed = true;
  }

  console.log("{ code : " + event.code + ", key : " + event.key + "}");

  if (event.code === "KeyA" && isShiftPressed && isNonConvertPressed) {
    event.preventDefault();
    const input = event.target;
    const insertChar = "X"; // 替换为目标字符，比如"à"

    const startPos = input.selectionStart;
    const endPos = input.selectionEnd;
    const currentValue = input.value;

    input.value = currentValue.substring(0, startPos) + insertChar + currentValue.substring(endPos);
    input.selectionStart = input.selectionEnd = startPos + insertChar.length;
  }
}

const kbdUp = function(event) {
  if (event.code === "ShiftLeft" || event.code === "ShiftRight") {
    isShiftPressed = false;
  }
  if (event.code === "ControlLeft" || event.code === "ControlRight") {
    isControlPressed = false;
  }
  if (event.code === "NonConvert" || event.code === "NonConvert") {
    isNonConvertPressed = false;
  }
}

const registerkbdHandler = function(element) {
  element.addEventListener("keydown", kbdDown);
  element.addEventListener("keyup", kbdUp);
}

registerkbdHandler(document.querySelector("input"));

说明 #

• 直接修改输入框value属性，同时维护光标位置，确保字符插入在用户预期位置
• 可直接将insertChar替换为目标法语带重音字符，如"é"、"à"、"ç"等
• 兼容所有主流浏览器，无需依赖模拟键盘事件的复杂逻辑

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