使用keydown事件时如何避免按下回车键添加多余购物清单项

问题原因 #

• 事件绑定对象错误：keydown事件绑定在了全局document上，无论焦点是否在输入框，按回车都会触发添加逻辑，导致多余条目生成。
• 条件判断逻辑错误：if判断中使用了逗号运算符，仅最后一个表达式event.key === 'Enter'会生效，输入框为空的情况下按回车也会添加空条目。
• 未阻止默认行为：输入框中按回车可能触发默认的表单提交等行为，导致重复提交。

修正方案 #

优化后JS代码 #

我们可以把新增条目的逻辑抽为公共函数，避免重复代码，再修正事件绑定和判断逻辑：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

// 抽离公共的新增条目逻辑
function addItem() {
  // 增加trim去除首尾空格，避免录入全空格的无效条目
  if (input.value.trim().length > 0) {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
  }
}

button.addEventListener("click", addItem);

// 把keydown事件绑定到输入框本身，而不是全局document
input.addEventListener('keydown', function (event) {
  // 把逗号替换为逻辑与&&，同时满足两个条件才执行
  if (input.value.trim().length > 0 && event.key === 'Enter') {
    event.preventDefault(); // 阻止回车默认行为
    addItem();
  }
});

HTML代码无需修改 #

<input type='text' id='userinput' />
<button type='button' id='enter'>Enter</button>
<ul></ul>

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