如何不借助input元素从keyEvents序列获取对应的最终输入字符串？

核心思路 #

手动模拟原生<input type="text">的文本处理逻辑，维护一个包含当前文本和光标位置的状态对象，遍历所有触发的KeyEvent并逐个处理，最终得到对应的字符串。

实现步骤 #

1. 初始化状态 #

创建一个状态对象，记录当前文本内容和光标位置：

const inputState = {
  text: '',
  cursorPosition: 0
};

2. 编写单个KeyEvent处理逻辑 #

针对不同按键类型，实现和原生输入框一致的行为：

function handleKeyEvent(event, state) {
  const { key } = event;

  // 处理可打印字符（排除功能键，同时考虑Shift修饰键的大小写）
  if (key.length === 1 && !event.ctrlKey && !event.altKey) {
    const leftSegment = state.text.slice(0, state.cursorPosition);
    const rightSegment = state.text.slice(state.cursorPosition);
    state.text = leftSegment + key + rightSegment;
    state.cursorPosition += 1;
  }
  // 退格键：删除光标前的字符，光标左移
  else if (key === 'Backspace') {
    if (state.cursorPosition > 0) {
      state.text = state.text.slice(0, state.cursorPosition - 1) + state.text.slice(state.cursorPosition);
      state.cursorPosition -= 1;
    }
  }
  // 删除键：删除光标后的字符，光标位置不变
  else if (key === 'Delete') {
    if (state.cursorPosition < state.text.length) {
      state.text = state.text.slice(0, state.cursorPosition) + state.text.slice(state.cursorPosition + 1);
    }
  }
  // 左方向键：光标左移（不越界）
  else if (key === 'ArrowLeft') {
    state.cursorPosition = Math.max(0, state.cursorPosition - 1);
  }
  // 右方向键：光标右移（不越界）
  else if (key === 'ArrowRight') {
    state.cursorPosition = Math.min(state.text.length, state.cursorPosition + 1);
  }
  // 可扩展其他功能：比如Home/End键、Ctrl+A全选、Ctrl+Backspace删单词等
}

3. 批量处理所有KeyEvents #

遍历事件列表，逐个调用处理函数，最终得到结果：

// 假设keyEvents是你收集到的所有触发的事件数组
const keyEvents = [/* 你的KeyEvent集合 */];
keyEvents.forEach(event => handleKeyEvent(event, inputState));

// 最终还原的文本内容
console.log(inputState.text);

补充说明 #

• 若需要处理修饰键组合（如Ctrl+Backspace删除整词、Shift+Arrow选中文本等），可以在处理函数中添加对应逻辑，完全模拟原生输入框的行为
• 对于输入法相关的复杂输入场景，可能需要额外处理input事件而非仅依赖KeyEvent，但如果只有KeyEvent数据，上述逻辑可以覆盖绝大多数常规输入场景

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