如何不依赖keypress事件检测Windows alt-code输入？

检测方案 #

不用依赖已废弃的keypress事件，目前有两个主流的标准化实现方案，可以覆盖包括Windows Alt-code输入在内的所有文本插入场景：

• 事前检测（支持拦截插入）：使用beforeinput事件，该事件会在文本实际插入到输入区域前触发，可以直接拿到即将插入的内容
• 事后检测：使用input事件，该事件会在文本插入完成后触发，适合不需要拦截、只需要感知插入行为的场景

代码示例 #

1. 基础beforeinput检测示例

// 监听输入框的文本插入行为，也可以绑定到document做全局监听
const targetInput = document.querySelector('input');
targetInput.addEventListener('beforeinput', (event) => {
  // 获取即将插入的文本内容
  const insertText = event.data;
  // 检测是否为目标特殊字符，比如Alt+0222输出的Þ
  if (insertText === 'Þ') {
    console.log('检测到特殊字符Þ即将插入');
    // 若需要阻止插入，取消事件默认行为即可
    // event.preventDefault();
  }
});

2. 适配合成输入的兜底方案

如果需要覆盖中日韩输入法等组合输入场景，可以配合composition*系列事件做兜底，避免漏判：

const targetInput = document.querySelector('input');
let isComposition = false;

// 标记组合输入开始
targetInput.addEventListener('compositionstart', () => {
  isComposition = true;
});

// 组合输入结束时检测输入内容
targetInput.addEventListener('compositionend', (event) => {
  isComposition = false;
  const insertText = event.data;
  if (insertText.includes('Þ')) {
    console.log('组合输入中检测到特殊字符Þ');
  }
});

// 普通输入场景检测
targetInput.addEventListener('beforeinput', (event) => {
  if (isComposition) return;
  const insertText = event.data;
  if (insertText === 'Þ') {
    console.log('检测到特殊字符Þ即将插入');
  }
});

方案优势 #

这种直接监听输入内容的逻辑，比监听键盘事件拼接组合键的方案兼容性和准确性更高：不需要处理不同键盘布局、不同系统的快捷键映射差异，不管用户是通过Alt-code、输入法、粘贴、拖拽插入的特殊字符，都可以准确检测到。

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