使用keypress实现待办列表添加时输入框仅保留单个字符的问题

你的代码存在两个关键问题导致输入异常：

• keypress事件时机错误：该事件在字符插入输入框前触发，此时input.value还未更新当前按下的字符，再加上else分支会立即清空输入框，导致输入框无法保存内容，只能看到单个字符。
• else分支逻辑错误：只要不满足「输入框非空且按下回车」的条件，就会清空输入框。换成keyup事件后，字符虽能短暂显示，但非回车按键都会触发清空，导致内容立刻消失。

修正后的代码 #

input.addEventListener("keyup", function(event){
    // 仅在按下回车且输入内容有效时添加待办项
    if(event.key === 'Enter' && input.value.trim().length > 0){
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(input.value.trim()));
        ul.appendChild(li);
        // 成功添加后才清空输入框
        input.value = "";
    }
});

关键改动说明 #

• 使用keyup事件：字符插入输入框后触发，能准确获取完整输入内容。
• 调整清空操作位置：只有成功添加待办项后才清空输入框，避免输入过程中内容被误删。
• 增加trim()处理：过滤全空格的无效输入，避免添加空的待办项。

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