如何使[Enter]只运行一个处理程序

How to make [Enter] only run a handler?

本文关键字：一个 程序 处理 运行 何使 Enter      更新时间：2023-10-03

我正在学习Head First HTML5。他们在书中有一个教程，介绍如何用JavaScript创建一个非常基本的播放列表。单击按钮后，输入的文本将添加到列表中。我想，"我宁愿只按回车键。"所以，我试着更进一步，让按键运行适当的功能。

似乎[Enter]键会将新文本添加到列表中，但随后会刷新页面和整个列表，删除任何输入的文本！我检查了一下其他键是否也发生了同样的事情，它们都工作得很好，所以这只是[Enter]键发生的事情。

window.onload = init;
function feedTheList() {
    var textInput, songName, li, ul;
    textInput = document.getElementById("songTextInput");
    songName = textInput.value;
    li = document.createElement("li");
    li.innerHTML = songName;
    if (!songName) {
        alert("There is no new song name.")
    }
    else {
        ul = document.getElementById("playlist");
        ul.appendChild(li);
    }
}
function init() {
    var button, textBox;
    window.addEventListener('keypress', function (e) {
        if (e.keyCode === 13) {
            feedTheList();
        }
    });
    button = document.getElementById("addButton");
    button.onclick = feedTheList;
}

为什么[Enter]键会刷新页面？如何防止它刷新页面？

由于您使用的是表单字段（输入或文本区域），因此[enter]键被映射为"提交"表单。您需要使用event.preventDefault():防止默认操作行为

window.addEventListener('keypress', function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        feedTheList();
    }
});
相关文章：