0

我从 OREILLY 的“Head First HTML5 Programming”的第 3 章中获取了这个简单的代码。我做了“一些”调整，但没什么大不了的。如您所见，它只是一个简单的小播放列表管理器，具有一些功能和警报。网页按原样显示。单击“添加歌曲”按钮，它将歌曲添加到播放列表。一切正常，除非您在键盘上按“Enter”，播放列表中的所有歌曲都会消失。如何为“Enter”键创建事件处理程序？我所知道的是“Enter”键码是 13，我该如何将它应用到我的页面？“也”，如您所见，我试图让添加到播放列表中的任何歌曲都保存在本地存储中并在每次打开网页时加载，但“没有”效果。

这是代码：

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="playlist.css">
<title>RTH</title>
<meta charset="utf-8">
<script>

loadPlaylist();


function handleButtonClick() {

    var textInput = document.getElementById("songTextInput");

    var songName = textInput.value;

    if (songName == "") {
        alert("Enter a track!");
    } else {
        alert("Congrats...track is now being added!");
    }


    var li = document.createElement("li");

    li.innerHTML = songName;

    var ul = document.getElementById("playlist");

    ul.appendChild(li);

    save(songName);

}

</script>
<body>


<Input type = "text" Id = "songTextInput" size = "40" placeholder = "Insert track here..."/>

<Input type = "button" id = "addButton" onclick ="handleButtonClick();" value = "Add Song"/>



<strong>

<ul id="playlist">


</ul>
</strong>
</body>
</html>
4

3 回答 3

1

由于您没有将表单数据提交到另一个 URL，因此您可以删除form标签。浏览器按回车键提交表单，但如果没有表单，enter则不会提交表单。然后您无需担心在 JavaScript 中处理它。

这假设您不想enter保存输入的歌曲。

于 2013-03-16T03:28:33.013 回答
0

我认为您需要的是 onsubmit 事件处理程序

<form onsubmit="return validate()">
    <Input type = "text" Id = "songTextInput" size = "40" placeholder = "Insert track here..."/>
    <Input type = "submit" id = "addButton" value = "Add Song"/>
</form>

function validate(event) {
    var textInput = document.getElementById("songTextInput");
    var songName = textInput.value;

    if (songName) {
        alert("Enter a track!");
        return false;
    } else {
        alert("Congrats...track is now being added!");
    }

    var li = document.createElement("li");
    li.innerHTML = songName;
    var ul = document.getElementById("playlist");
    ul.appendChild(li);
    save(songName);    

    return false;
}

演示：小提琴

于 2013-03-16T03:21:28.313 回答
0

您可以将事件参数添加到您的函数中。

jQuery方法：

$(document).ready(function() {
   $('input').on('keyup', function(event) {
       if(event.keyCode == 13)
       {
           alert('Enter');
           event.preventDefault();
       }
   }); 
});

原始 Javascript 方法：

var Input = document.getElementByTagName('input');

Input.keyUp = function(event)
{
     if(event.keyCode == 13)
     {
        alert('Enter!');
        event.preventDefault();
     }
}
于 2013-03-16T03:26:49.430 回答