如何在JavaScript Textarea中阻止AltGr+按键组合输入重音字符？

问题原因 #

你之前的代码失效有两个核心原因：

1. AltGr是组合键：多数系统中AltGr等价于Ctrl+Alt组合，仅检测AltRight或单独的Ctrl(17)/Alt(18)按键，无法覆盖所有AltGr触发的场景。
2. 事件时机错误：keydown事件仅能阻止按键动作，但带重音字符的插入往往是在input/beforeinput阶段完成的，此时再阻止keydown已经无法阻止文本插入。

解决方案 #

以下是两种可靠的实现方式，可根据需求选择：

方式1：通过beforeinput提前阻止（推荐） #

在文本即将插入到textarea时直接阻止，效率更高：

const textarea = document.querySelector('textarea');

textarea.addEventListener('beforeinput', (event) => {
  // 两种判断逻辑：要么是AltGr触发的输入，要么输入的字符本身带重音
  const isAltGrPressed = event.getModifierState('AltGraph');
  const hasAccent = /[\u0300-\u036f\u1dc0-\u1dff\u20d0-\u20ff]/u.test(event.data);
  
  if (isAltGrPressed || hasAccent) {
    event.preventDefault();
  }
});

方式2：通过input事件事后过滤（更稳妥） #

不管输入来源（包括粘贴），直接移除所有重音标记，适合需要彻底清理带重音字符的场景：

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', (event) => {
  const target = event.target;
  // 使用Unicode标准化分解，移除所有重音组合字符
  const cleanedValue = target.value.normalize('NFD').replace(/[\u0300-\u036f\u1dc0-\u1dff\u20d0-\u20ff]/gu, '');
  
  if (cleanedValue !== target.value) {
    // 保存光标位置，避免过滤后光标错位
    const cursorPos = target.selectionStart;
    target.value = cleanedValue;
    // 恢复光标到原位置
    target.setSelectionRange(cursorPos, cursorPos);
  }
});

补充说明 #

• event.getModifierState('AltGraph')是检测AltGr按键的标准API，兼容性优于单独判断ctrlKey + altKey。
• 正则表达式中的\u0300-\u036f等范围覆盖了绝大多数Unicode重音标记，可根据需要调整范围。

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