如何排除仅含空格的用户输入 前端列表添加功能校验问题

你可以使用JavaScript字符串内置的trim()方法处理用户输入，该方法会自动移除字符串首尾的所有空白字符（空格、制表符、换行符等任意数量的空白都可以被清除），仅需修改判断逻辑即可实现全空白输入的过滤。

完整修改后的代码 #

<input id="userinput" type="text" placeholder="Enter items">
<button id="add">Click Me!</button>
<ul id="list">
    <li>pen</li>
    <li>pencil</li>
    <li>paper</li>
</ul>
<script>
    var input = document.getElementById("userinput");
    var button = document.getElementById("add");
    var ul = document.querySelector("ul");
    
    button.addEventListener("click", function(){
        // 先trim去除首尾空白再判断长度
        if (input.value.trim().length > 0) {
            var li = document.createElement("li")
            // 如果不需要保留输入内容的首尾空格，也可以直接传入input.value.trim()
            li.appendChild(document.createTextNode(input.value));
            ul.appendChild(li);
            // 可选：添加完成后清空输入框
            input.value = '';
        }    
    })
</script>

补充优化点 #

• 如果要避免重复添加相同内容，可以增加输入值和已有列表项的对比逻辑
• 可以补充回车触发添加的逻辑，提升用户使用体验
• 上述代码里的清空输入框逻辑为可选配置，可根据需求选择是否保留

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