如何避免修改activeElement.value时同时改动当前与后续元素？

你碰到的核心问题是没阻止键盘事件的默认行为。当你在keydown事件里修改当前元素值、切换焦点后，浏览器的默认按键操作（比如输入字符、退格删除）还会继续执行——这时候焦点已经切到新元素，默认操作就会作用上去，导致两个元素都被修改。

只需要在处理逻辑里按需调用event.preventDefault()阻止默认行为，同时完善边界判断即可：

修改后退格键处理代码 #

element.addEventListener('keydown', function(event) {
    if (event.key === "Backspace"){
        console.log("backspaced");
        const currentId = parseInt(document.activeElement.id);
        // 不是第一个输入框时才执行清空+切焦点
        if (currentId !== 1) {
            document.activeElement.value = '';
            const prevIndex = currentId - 1;
            document.getElementById(prevIndex).focus();
        }
        // 无论是否切焦点，都阻止退格的默认行为
        event.preventDefault();
    }
});

修改字符按键处理代码 #

// 这段代码要放在同一个keydown事件监听函数内
const isPrintableKey = event.key.length === 1 && /[a-zA-Z0-9]/.test(event.key);
const isAllowedSpecialKey = event.key.length > 1 && /[^a-zA-Z0-9]/.test(event.key);

if (isPrintableKey || isAllowedSpecialKey) {            
    console.log("something was pressed");
    const currentId = parseInt(document.activeElement.id);
    document.activeElement.value = event.key;
    // 不是最后一个输入框时才切焦点
    if (currentId !== 9) {
        const nextIndex = currentId + 1;
        document.getElementById(nextIndex).focus();
    }
    // 阻止默认输入行为，避免字符跑到新聚焦的元素里
    event.preventDefault();
}

• event.preventDefault()：直接叫停浏览器对当前按键的默认处理，从根源避免焦点切换后默认操作影响新元素。
• 提前存当前元素ID：避免多次调用document.activeElement时，因焦点已切换导致取值错误。
• 完善边界判断：比如第一个输入框按退格时，只阻止默认行为不切焦点；最后一个输入框按字符键时，只设值不切焦点。

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