数组push操作返回空双引号而非实际输入值，如何排查解决？

DevOps 小满

2026-10-7

问题排查与修复方案

核心问题根因

重复绑定事件监听：你把inputName.addEventListener('keyup', handletyping)写在了事件回调函数handletyping内部，这会导致每次键盘按键抬起时，都给输入框新增一次相同的事件监听。多次绑定后，按下回车会触发多次handletyping执行，如果第一次执行时你有清空输入框的逻辑，后续执行的insertName就会传入空字符串，最终数组就会多出来一个空值。
未阻止回车默认行为：如果你的输入框包裹在<form>标签内，按下回车会触发表单默认提交行为，输入框内容会被自动清空，你在keyup阶段读取到的event.target.value已经是空值。
事件触发时序问题：如果你的清空输入框逻辑绑定在keydown阶段，keydown会先于keyup触发，等keyup执行时输入框已经被清空，拿到的就是空值。

修复后的代码

// 初始化阶段绑定事件，禁止放在事件回调内部
inputName.addEventListener('keyup', handletyping); 
inputName.focus();  

function handletyping(event) {
    if (event.key === 'Enter') {
        // 阻止回车默认行为，避免表单提交、输入框自动清空
        event.preventDefault();
        const inputValue = event.target.value.trim();
        // 可选判断：过滤空输入，避免插入无效值
        if (inputValue) {
            insertName(inputValue);  
        }
        console.log(globalNames);
        // 如需清空输入框，在读取数值后再执行
        event.target.value = '';
    }                   
}