如何使 [Enter] 仅运行成为处理程序？

Question

我正在通过 Head First 学习 HTML5。他们在书中有一个关于如何在 JavaScript 中创建非常基本的播放列表的教程。单击按钮，输入的文本将添加到列表中。我想，"I would prefer to just hit the enter key." 所以，我尝试更进一步，让按键运行成为合适的功能。

似乎 [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]键刷新页面？如何防止它刷新页面？

Answer 1

由于您使用的是表单字段（输入或文本区域），因此 [enter] 键映射到 'submit' 表单。您需要 prevent the default action behavior 使用 event.preventDefault():

window.addEventListener('keypress', function (e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        feedTheList();
    }
});

如何使 [Enter] 仅运行成为处理程序？

How to make [Enter] only run a handler?

html

javascript

enter

如何使 [Enter] 仅 运行 成为处理程序？

How to make [Enter] only run a handler?

html

javascript

enter

如何使 [Enter] 仅运行成为处理程序？