JavaScript中实现按下Enter键触发按钮点击及按键监听失效排查

问题根因 #

• 你将keyup事件绑定在了按钮元素上，只有当按钮处于聚焦状态时触发的按键动作才会被该监听器捕获。而用户实际输入完成后按回车时，焦点一般停留在输入框（<input>）元素上，按钮无法收到按键事件，自然不会触发回调逻辑。
• 原代码里调用的event.preventDefault()绑在按钮上没有实际意义，该方法通常用于阻止输入框按回车时默认提交表单的行为。

修复方案 #

将keyup事件监听器绑定到输入框元素input上即可，同时可以保留输入长度判断逻辑，避免空内容被添加到列表中。

修正后可运行代码 #

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

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";
}

button.addEventListener("click", function() {
    if (inputLength() > 0) {
        createListElement();
    }
})

// keyup事件绑定到input元素而非button
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    // 与点击逻辑保持一致，增加输入长度判断
    if (inputLength() > 0 && event.key === "Enter") {
        createListElement();
    }
})

补充说明：如果需要支持按钮处于聚焦状态时按回车触发添加逻辑，不需要额外绑定keyup事件，原生<button>元素默认支持回车、空格键触发绑定的click事件。

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