输入框清空后输入韩文字符时旧字符重复出现问题求助

问题现象 #

• 首次输入韩文字符时功能正常，但输入框被清空后再次物理输入韩文字符，之前输入过的字符会意外出现在新输入字符的前方
• 示例：页面加载后问题区域显示“ㅐ”，输入“ㅐ”一切正常；清空输入框后问题区域显示“ㅏ”，输入“ㅏ”后输入框显示“ㅐㅏ”
• 仅物理输入韩文字符时触发该问题，输入拉丁字符、粘贴韩文字符无异常；手动按退格键后再输入韩文字符可避免此问题

环境信息 #

• 操作系统：Windows 10 Home
• 输入法：Microsoft IME
• 浏览器：Google Chrome、Microsoft Edge

代码片段 #

JavaScript 代码 #

const questionField = document.querySelector(".questionField");
const inputField = document.querySelector(".inputField");
let currentIndex;
let currentCorrectAnswer;
const characters = [
    "ㅏ",
    "ㅑ",
    "ㅐ"
]

inputField.focus();
generateQuestion();

inputField.addEventListener("input", function(e){
    if(inputField.value == currentCorrectAnswer){
        correct(e);
    } else if(inputField.value != ""){
        incorrect(e);
    }
})

function correct(e){
    console.log(inputField.value + " input & is correct." + " is composing: " + e.isComposing);
    questionField.innerHTML = "Correct"
    setTimeout(nextQuestion, 500);
}

function incorrect(e){
    console.log(inputField.value + " input & is incorrect, " + currentCorrectAnswer + " was the answer." + " is composing: " + e.isComposing);
    questionField.innerHTML = "Incorrect"
    setTimeout(nextQuestion, 500);
}

function nextQuestion(){
    generateQuestion();
    inputField.value = "";
}

function generateQuestion(){
    currentIndex = Math.floor(Math.random() * characters.length);
    questionField.innerHTML = characters[currentIndex];
    currentCorrectAnswer = characters[currentIndex];
}

HTML 代码 #

<h1 class="questionField">Key</h1>
<label for="inputField">Enter this key on your keyboard</label><br>
<input type="text" id="inputField" class="inputField" placeholder="Answer here">

问题原因与修复方案 #

原因 #

问题源于韩文输入法的**合成事件（composing）**处理逻辑缺失：使用IME输入韩文时，浏览器会在输入法合成字符的过程中多次触发input事件，此时e.isComposing为true，原代码直接在这些事件中执行校验和清空操作，会干扰IME的状态缓存，导致后续输入时残留之前的字符。

修复代码 #

const questionField = document.querySelector(".questionField");
const inputField = document.querySelector(".inputField");
let currentIndex;
let currentCorrectAnswer;
const characters = [
    "ㅏ",
    "ㅑ",
    "ㅐ"
]

inputField.focus();
generateQuestion();

// 处理input事件，跳过合成中的触发
inputField.addEventListener("input", function(e){
    if (e.isComposing) return;
    validateInput(e);
})

// 监听合成结束事件，确保完成输入后再校验
inputField.addEventListener("compositionend", function(e){
    validateInput(e);
})

// 统一校验逻辑
function validateInput(e){
    if(inputField.value == currentCorrectAnswer){
        correct(e);
    } else if(inputField.value != ""){
        incorrect(e);
    }
}

function correct(e){
    console.log(inputField.value + " 输入正确。is composing: " + e.isComposing);
    questionField.innerHTML = "正确"
    setTimeout(nextQuestion, 500);
}

function incorrect(e){
    console.log(inputField.value + " 输入错误，正确答案是" + currentCorrectAnswer + "。is composing: " + e.isComposing);
    questionField.innerHTML = "错误"
    setTimeout(nextQuestion, 500);
}

function nextQuestion(){
    generateQuestion();
    inputField.value = "";
    // 重置输入法状态，避免缓存残留
    inputField.blur();
    setTimeout(() => inputField.focus(), 0);
}

function generateQuestion(){
    currentIndex = Math.floor(Math.random() * characters.length);
    questionField.innerHTML = characters[currentIndex];
    currentCorrectAnswer = characters[currentIndex];
}

修复说明 #

1. 增加e.isComposing判断，跳过输入法合成过程中的input事件，避免提前触发校验
2. 新增compositionend事件监听，确保在输入法完成字符合成后再执行校验逻辑
3. 在nextQuestion中，清空输入框后通过失焦再聚焦的操作，重置IME的状态缓存，彻底清除残留数据

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