"onclick"이벤트 처리기를 만들었습니다. 이제 "Enter"키에 대한 이벤트 처리기를 어떻게 만듭니 까?

OREILLY의 "Head First HTML5 Programming"3 장에서 간단한 코드를 사용했습니다. 나는 약간의 조정을했지만, 중요한 것은 아무것도 없었다. 아시다시피, 몇 가지 기능이있는 간단한 재생 목록 관리자 일뿐입니다. & 알림. 웹 페이지가 제대로 표시됩니다. "노래 추가"버튼을 클릭하면 노래가 재생 목록에 추가됩니다. 키보드에서 "Enter"를 누르는 경우를 제외하고 모든 것이 제대로 작동하므로 재생 목록의 모든 노래가 사라집니다. "Enter"키에 대한 이벤트 처리기를 어떻게 만듭니 까? 내가 아는 전부는 "Enter"키 코드가 13인데, 정확히 내 페이지에 어떻게 적용합니까? "ALSO"는 볼 수 있듯이 재생 목록에 추가 된 노래가 웹 페이지가 열릴 때마다로드 된 Local Storage &에 저장되지만 "사용하지 못하도록"만들려고했습니다. 어떤 도움을 주셔서 감사합니다, 미리 감사드립니다! Fiddle "onclick"이벤트 처리기를 만들었습니다. 이제 "Enter"키에 대한 이벤트 처리기를 어떻게 만듭니 까?

출처

2013-03-16 Jaleel Dwight

이 링크를 참조로 사용 http://javascript.info/tutorial/keyboard-events – exexzian

내가 무엇을 당신이 필요로하는

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

데모 onsubmit 이벤트 핸들러 생각 :

여기에 코드입니다.

JQuery와 방법 :

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

원시 자바 스크립트 방법 : 다른 URL로 양식 데이터를 제출하지 않기 때문에

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

Input.keyUp = function(event) 
{ 
    if(event.keyCode == 13) 
    { 
     alert('Enter!'); 
     event.preventDefault(); 
    } 
}

출처

2013-03-16 03:21:28

의견을 보내 주시면 감사하겠습니다. 처음에는 일하는 것 같았다. 나는 enter & alert "finally"가 펑하고 올라 갔다! 그 다음 나는 다시 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 03:26:49

, 당신은 form 태그를 제거 할 수 있습니다. 브라우저는 입력 할 때 양식을 제출하지만 양식이 없으면 enter은 양식을 제출하지 않습니다. 그리고 JavaScript로 처리하는 것에 대해 걱정할 필요가 없습니다.

입력 된 노래를 저장하려면 enter을 원하지 않는다고 가정합니다.

출처

2013-03-16 03:28:33

안녕하세요, 빠른 응답 주셔서 감사합니다. 제안한대로

나는 그 부분을 놓쳤습니다 :) 더 많은 코드를 게시해야합니다. loadPlaylist 및 저장 함수는 무엇을합니까? –

책에서 얻은 코드입니다. 그것은 "save (songName);"라고 말했습니다. 입력 된 노래를 로컬 저장소에 저장하고 & loadPlaylist(); 웹 페이지가 열릴 때마다 재생 목록을로드하기로되어있었습니다. 이 책은 내 기어를 갈아 치기 시작했습니다.> : | –

"onclick"이벤트 처리기를 만들었습니다. 이제 "Enter"키에 대한 이벤트 처리기를 어떻게 만듭니 까?

답변

관련 문제