我正在通过 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] 键被映射为“提交”表单。你需要 prevent the default action behavior使用 event.preventDefault()
:
window.addEventListener('keypress', function (e) {
if (e.keyCode === 13) {
e.preventDefault();
feedTheList();
}
});
关于javascript - 如何让 [Enter] 只运行一个处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28486077/