如何阻止Windows下textarea插入表情时textInput事件的默认行为？

核心解决方案：改用beforeinput事件拦截 #

在Windows系统下，通过Win + .插入表情时，textInput事件的preventDefault()失效是因为该事件触发时机较晚，系统已启动表情插入流程。改用**beforeinput事件**即可解决——它会在输入操作实际执行前触发，能有效阻断默认插入行为。

代码实现示例 #

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

textarea.addEventListener('beforeinput', (event) => {
  // 匹配表情插入的输入类型
  if (['insertCompositionText', 'insertText'].includes(event.inputType)) {
    // 判断输入内容是否为Emoji（Unicode正则匹配）
    const isEmoji = /\p{Emoji}/u.test(event.data);
    if (isEmoji) {
      event.preventDefault();
      // 这里编写你的自定义表情插入逻辑
      const start = textarea.selectionStart;
      const end = textarea.selectionEnd;
      const currentValue = textarea.value;
      // 手动将表情插入光标位置
      textarea.value = currentValue.slice(0, start) + event.data + currentValue.slice(end);
      // 调整光标到表情后方
      textarea.selectionStart = textarea.selectionEnd = start + event.data.length;
    }
  }
});

补充说明 #

• beforeinput事件兼容性覆盖Chrome、Edge、Firefox等主流浏览器，完全适配Windows系统的表情插入场景。
• 正则/\p{Emoji}/u需启用Unicode标志u，才能准确识别各类Emoji字符（包括组合式表情）。
• 若需兼容极旧浏览器，可尝试搭配compositionstart/compositionend事件，但beforeinput是更简洁直接的方案。

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