我創建了一個「onclick」事件處理程序，現在如何爲「Enter」鍵創建一個事件處理程序？

我從OREILLY的「Head First HTML5 Programming」第3章中得到了這個簡單的代碼。我做了一些「少量」調整，但沒有什麼重大的。如您所見，這只是一個簡單的小播放列表管理器，具有一些功能&警報。該網頁看起來應該如此。點擊「添加歌曲」按鈕，它將歌曲添加到播放列表中。一切正常，除非你在鍵盤上點擊「Enter」，播放列表中的所有歌曲都會消失。如何爲「Enter」鍵創建事件處理程序？我所知道的是「Enter」鍵碼是13，我該如何將它應用到我的頁面？「ALSO」，正如你所看到的，我試圖做到這一點，以便任何歌曲添加到播放列表將被保存在本地存儲&每次打開網頁時加載，但「無效」。任何幫助將不勝感激，在此先感謝！我創建了一個「onclick」事件處理程序，現在如何爲「Enter」鍵創建一個事件處理程序？

下面的代碼：

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

來源

2013-03-16 Jaleel Dwight

試試這個鏈接作爲參考http://javascript.info/tutorial/keyboard-events – exexzian 2013-03-16 03:25:45

我想你需要的是一個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

來源

2013-03-16 03:21:28

嘿，欣賞這個建議。它似乎在起初工作。我按了回車＆警報「終於」彈出！然後我再次按下輸入。我看到歌曲進入播放列表大約半毫秒，然後所有歌曲從播放列表中消失=/ – 2013-03-16 03:50:03

您可以將事件參數添加到您的功能。

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-16 03:26:49

既然你不提交表單數據到另一個URL，你可以刪除form標籤。瀏覽器在您輸入時提交表單，但如果沒有表單，enter將不會提交表單。然後你不需要擔心在JavaScript中處理它。

這裏假設您不希望enter保存輸入的歌曲。

來源

2013-03-16 03:28:33

嘿，感謝您的快速響應，Scott。我按照你的建議刪除了

我錯過了那部分問題:)你將不得不發佈更多的代碼。 loadPlaylist和save函數做什麼？ – 2013-03-16 03:46:13

這是我從書中得到的代碼。它說「save（songName）;」將輸入的歌曲保存到本地存儲＆「loadPlaylist（）;」應該在每次打開網頁時加載播放列表。這本書真的開始磨練我的齒輪>：| – 2013-03-16 03:55:56

我創建了一個「onclick」事件處理程序，現在如何爲「Enter」鍵創建一個事件處理程序？

回答

相關問題