JavaScript实现待办清单时按回车键如何清空输入框

实现方法 #

你只需要在完成待办项添加的逻辑后，将输入框的value属性重置为空字符串即可。修改后的完整代码如下：

document.addEventListener("keyup", function (event) {
    if (event.key === 'Enter') {
        const inputEle = document.getElementById("the-input");
        const inputText = inputEle.value;
        
        const node = document.createElement("li");
        const textnode = document.createTextNode(`•${inputText}`);
        node.appendChild(textnode);
        document.getElementById("list").appendChild(node);
        
        // 新增以下行实现回车后清空输入框
        inputEle.value = '';
    }
});

可选优化 #

你可以额外增加输入内容非空校验，避免用户误触回车添加空白待办项：

document.addEventListener("keyup", function (event) {
    if (event.key === 'Enter') {
        const inputEle = document.getElementById("the-input");
        // 去除首尾空白后判断是否为空
        const inputText = inputEle.value.trim();
        if (!inputText) return;
        
        const node = document.createElement("li");
        const textnode = document.createTextNode(`•${inputText}`);
        node.appendChild(textnode);
        document.getElementById("list").appendChild(node);
        
        inputEle.value = '';
    }
});

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