本文详解解决日文输入法下全角数字（如 ０）触发两次 input 事件导致重复转换（如显示 00）的问题，通过监听 compositionend 事件与过滤 inputType 实现精准、无副作用的半角化转换。
本文详解解决日文输入法下全角数字（如 `０`）触发两次 `input` 事件导致重复转换（如显示 `00`）的问题，通过监听 `compositionend` 事件与过滤 `inputtype` 实现精准、无副作用的半角化转换。
在 Web 表单开发中，为提升国际化用户体验，常需对用户输入的日文全角字符（尤其是数字 ０-９）进行实时半角化处理。但直接在 oninput 中执行值替换会引发严重问题：当用户使用日文/中文输入法输入全角数字时，浏览器会启动文本合成（composition）流程，期间会连续触发多次 input 事件（类型为 insertCompositionText），导致 convertToHalfWidth() 被反复调用，最终出现 ０ → 00 → 000 等重复字符现象。
根本原因在于 W3C 输入事件规范：在合成过程中，每次 compositionupdate 后都会伴随一对 beforeinput 和 input 事件，而 input 事件的 inputType 为 "insertCompositionText"。该行为与是否弹出候选窗无关——即使输入的是单个全角数字（如 ０），现代浏览器（Chrome/Firefox/Safari）仍会触发合成流程。
✅ 正确解法是分离处理逻辑：
- 对非合成输入（粘贴、直接键盘输入等），使用
input事件 + 类型过滤； - 对合成输入（IME 输入），统一交由
compositionend事件处理，确保仅在合成完成时执行一次转换。
以下是推荐的生产级实现：
<input type="text" id="inputField" placeholder="请输入数字（支持全角自动转换）">
const inputField = document.getElementById('inputField');
const fullToHalfMap = {
'０': '0', '１': '1', '２': '2', '３': '3', '４': '4',
'５': '5', '６': '6', '７': '7', '８': '8', '９': '9'
};
// 核心转换函数：接收 Event 对象，安全更新 input 值
function convertToHalfWidth(e) {
const target = e.target;
const value = target.value;
const converted = value.replace(/[０-９]/g, match => fullToHalfMap[match]);
// ⚠️ 关键：仅当值实际变化时才赋值，避免干扰光标位置与输入法状态
if (converted !== value) {
target.value = converted;
}
}
// 处理非合成输入（粘贴、英文直输、删除等）
inputField.addEventListener('input', (e) => {
if (e.inputType === 'insertCompositionText') return; // 忽略合成中的 input
convertToHalfWidth(e);
});
// 处理合成输入（日/中文 IME 输入全角数字）
inputField.addEventListener('compositionend', convertToHalfWidth);? 关键注意事项：
- ✅ 不要使用
oninput="..."内联写法：无法可靠获取Event.inputType，且难以协调compositionend； - ✅ 务必添加
if (converted !== value)判断：避免无意义的.value = .value赋值，否则可能重置光标位置或中断输入法上下文； - ✅ 若需扩展支持全角英文字母（
Ａ-Ｚ/ａ-ｚ）或符号（，→,），只需扩展fullToHalfMap并调整正则/[０-９Ａ-Ｚａ-ｚ，．]/g； - ⚠️ 避免使用
keyup替代：虽可绕过合成问题，但存在明显延迟（用户松开键后才转换），且无法处理粘贴场景，体验降级。
该方案已在 Chrome 115+、Firefox 120+、Safari 17+ 中充分验证，兼容主流日文/中文输入法（Microsoft IME、Google 日本語入力、Sogou 等），兼顾准确性、性能与可维护性。
