동적 내용이 포함 된 jQuery 모달 팝업 창에 keydown 이벤트 추가

Question

사용자의 응답을 확인하기 위해 .net 프로젝트에서 사용하는 jQuery가 팝업되는 예/아니요 확인 창을 만드는 기능을 만들었습니다. 클릭 한 항목에 따라 기능을 트리거하는 버튼을 생성했습니다.

//은 (TitleKey이 InstructionsKey, YesFunction, 된 nofunction) {

//create the service to give us the content 
var agpc = new AjaxServices.AjaxPopUps(); 

//get the results and open the popup with the functions aligned 
agpc.GetLocalizedStrings(new Array(TitleKey, InstructionsKey, "Yes", "No"), function (results) { 
    var content = jQuery.parseJSON(results.toString()); 

    //get the buttons for confirm/or not 
    var YesNoButtons = jQuery('<div></div>', { id: 'YesNoButtons' }); 
    var yesButton = jQuery('<a>' + content.Yes + '</a>'); 
    var noButton = jQuery('<a>' + content.No + '</a>'); 

    //add the event handlers 
    yesButton.click(YesFunction); 
    noButton.click(NoFunction); 

    //set a nice pointer for mouse over 
    yesButton.css({ cursor: 'pointer' }); 
    noButton.css({ cursor: 'pointer' }); 

    YesNoButtons.append(yesButton).append(noButton); 
    //show the box 
    openPopup("Non-JSON", YesNoButtons, eval('content.' + TitleKey), eval('content.' + InstructionsKey)); 

    }); 
} 

그럼 이제 어려운 부분을 제공 지역화 된 방식으로 기능 popupConfirm 물건을 확인하는 specailized 팝업을로드합니다. 회사는 또한 키 누르기가 예/아니오 기능을 트리거하기를 원합니다. 엔터 키는 예를 트리거하고 이탈은 아니오를 트리거합니다. 나는이 타입의 셋업으로 이것을 어떻게 할 것인지 전혀 모른다.

대부분의 코드는 무시해도됩니다. 서버에서 지역화 된 문자열을 가져 오는 것입니다. 그것은 내가 알 수없는 keydown() 이벤트를 추가하는 것입니다.

아이디어가 있으십니까?

Answer 1

아주 어려운 일이 아닙니다. 사용자 정의 조정을 시도하고 다음의 브라우저 간 지원 코드를 사용하십시오.

당신이 어떤 조치를 이벤트 키 (키보드에서 누르면 키)을 잡아 할 필요가있는 경우 :

$("#YourDialog").keypress(function(event) { // when you do a key press inside of the element with ID YourDialog 
    var keyCode = event.keyCode ? event.keyCode : event.which; 
    if(event.keyCode == 13 || event.keyCode == 27) { // catching event for clicking either enter key or escape key. 
    $("#OkButton").trigger('click'); 
    // or $("#YourDialog").hide(); to hide your dialog. 
    } 
}); 

반대로 당신이 코드를 사용해야합니다 기본 키 동작을 방지해야하는 경우 :

$("#YourDialog").keypress(function(event) { // when you do a key press inside of the element with ID YourDialog 
    var keyCode = event.keyCode ? event.keyCode : event.which; 
    if(event.keyCode == 13 || event.keyCode == 27) { // catching event for clicking either enter key or escape key. 
    event.preventDefault(); // preventing the default action - so, in this case, when the enter or escape is pressed nothing will happen. Especially it's important when you want to prevent user from click some keys. 
    event.stopPropagation(); 
    } 
}); 

사용자 이벤트 (누른 키)를 catch해야합니다. 키 코드 13은 엔터 키를 나타내고 키 코드 27은 이스케이프 키를 나타냅니다. keyCode 변수는 Internet Explorer를 포함한 모든 브라우저에서 보편적으로 작동합니다.

keyCode List에 대해서는 여기를 참조하십시오.

이 방법이 도움이되기를 바랍니다.