如何实现keypress事件记录非英语（韩语）输入字符？

问题原因 #

韩语属于组合型表意文字，输入时需通过多个按键组合生成最终字符。keypress事件仅能捕获单个按键的编码，无法识别输入法组合后的完整韩语字符，因此会出现只记录英文字符的情况（单个按键对应的英文编码）。

解决方案 #

推荐使用以下两种事件替代keypress，它们能正确捕获输入法组合完成后的字符：

1. 使用input事件

该事件在元素内容发生变化时触发，无论直接输入还是输入法组合输入，都能实时获取最新内容：

$("#divtarget").on("input", function() {
  // 获取div当前的全部内容
  const fullText = $(this).text();
  // 获取最后输入的单个字符（如需）
  const lastChar = fullText.slice(-1);
  
  console.log("当前输入内容:", fullText);
  console.log("最后输入的字符:", lastChar);
});

2. 使用compositionend事件

该事件在输入法组合输入完成（如确认候选词、结束输入）时触发，可精准获取组合后的完整字符：

$("#divtarget").on("compositionend", function(event) {
  // 获取组合完成的字符
  const composedChar = event.originalEvent.data;
  console.log("组合完成的韩语字符:", composedChar);
});

前置要求 #

确保你的div元素开启可编辑模式，否则无法聚焦输入：

<div id="divtarget" contenteditable="true" style="width: 200px; height: 100px; background: blue; color: white;"></div>

补充说明 #

keypress事件已被标准废弃，即使处理英文输入也不建议使用。对于非英语输入法（如韩语、中文），input或composition系列事件是更可靠的选择。

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