Question

我从OREILLY＆＃34; Head First HTML5 Programming＆＃34;的第3章中选择了这个简单的代码。我做了一个＆＃34;少数＆＃34;调整，但没什么大的。如你所见，它只是一个简单的小播放列表管理器，具有一些功能和功能。警报。网页就像它应该的那样出现。点击＆＃34;添加歌曲＆＃34;按钮，它将歌曲添加到播放列表。一切都按预期工作，除非你点击＆＃34;输入＆＃34;在键盘上，播放列表中的所有歌曲都会消失。如何为＆＃34; Enter＆＃34;创建一个事件处理程序。键？我所知道的是＆＃34;输入＆＃34; keycode是13，我该如何将它应用到我的页面？＆＃34; ALSO＆＃34;，正如您所看到的，我试图将其添加到播放列表中的任何歌曲都保存在Local Storage＆amp;每次打开网页时都会加载，但是没有＆＃34; no＆＃34;无济于事。任何帮助都将受到高度赞赏，提前谢谢！

以下是代码：

<!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>

Answer 1

由于您没有将表单数据提交到其他网址，因此您可以删除form代码。当您按Enter键时，浏览器会提交表单，但如果没有表单，enter将不会提交表单。然后你不必担心在JavaScript中处理它。

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

Answer 2

我认为你需要的是一个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;
}

演示：Fiddle

Answer 3

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

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();
     }
}

我创建了一个“onclick”事件处理程序，现在如何为“Enter”键创建事件处理程序？

3 个答案: