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

【问题标题】：How to make [Enter] only run a handler?如何使 [Enter] 只运行一个处理程序？
【发布时间】：2015-02-12 19:26:11
【问题描述】：

我正在学习 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] 键会刷新页面？如何防止它刷新页面？

【问题讨论】：

标签： javascript html enter

【解决方案1】：

由于您使用的是表单域（输入或文本区域），因此 [enter] 键被映射为“提交”表单。你需要prevent the default action behavior 使用event.preventDefault():

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

【讨论】：