jQuery 'enter'키 이벤트 핸들러

Question

'enter'키를 이벤트로 사용하여 'form'의 입력을 목록에 추가하는 데 문제가 있습니다. 아래 코드는 작동하지만 "cmd + enter"조합을 누르면 목록에 항목이 추가되고 같은 페이지에 새 탭이 열립니다.

'form'필드에 포커스가있을 때마다 'enter'키 ('cmd + enter'조합이 아님)를 누르면 목록에 항목이 추가되고 새로운 항목이 추가되지 않습니다. 탭이 동일한 페이지와 함께 열립니다. 는

다음은 코드의 HTML 부분 (I 파이어 폭스 48.0 및 Safari 9.1.2에서 내 코드를 테스트하고있어) :

<form id="inputWindow"> Type-in here: <input type='text' name='input'></input></form> 

여기 코드의 jQuery를 부분입니다.

$(document).ready(function() { 
$('#inputWindow').keypress(function(event) { 

if (event.which == 13){ 
var answer = $("input[name=input]").val(); 
    $('.list').append('<div class="item">' + answer + '</div>'); 
    }); 
}); 

Answer 1

가 누락되었습니다. 페이지 재로드 문제는 html 부분에 onsubmit = "return false"를 추가하여 쉽게 해결할 수 있습니다. 그래서 코드는 다음과 같이한다 HTML 부분 :

<form id="inputWindow" onsubmit="return false"> Type-in here: <input type='text' name='input'></input></form> 

jQuery를 부분() .ready 당신이 당신의 $ (문서가 가정) :

$('#inputWindow').submit(function() { 
var answer = $("input[name=input]").val(); 
    $('.list').append('<div class="item">' + answer + '</div>'); 
}); 

Answer 2

당신은 실제로 대신 .keypress 이벤트의 .submit를 사용하는 것이 훨씬 쉽다 일부 });jsfiddle

$(document).ready(function() { 
    $('#inputWindow').keypress(function(event) { 

    if (event.which == 13){ 
     var answer = $("input[name=input]").val(); 
     $('.list').append('<div class="item">' + answer + '</div>'); 
    } 
    }); 
});