在JQuery UI對話框中輸入關鍵行爲

如何在下面修改代碼，以便當按下回車鍵時，jQuery日期選擇器將作出反應並將變量（datePickerValue）設置爲自動突出顯示的日期當jQuery打開時的當前日期。編號喜歡能夠打開日期選擇器，快速按回車鍵，它將採取當前的一天，並將其存儲到變種。在JQuery UI對話框中輸入關鍵行爲

<html> 

<head> 

<!-- LOAD JQUERY LIBRARY: --> 
    <link href="jq/jquery-ui.css"   type="text/css" rel="stylesheet" /> 
    <script src="jq/jquery.min.js"   type="text/javascript"> </script> 
    <script src="jq/jquery-ui.min.js"  type="text/javascript"> </script> 

<script type="text/javascript"> 

window.onload = function() { 

       $('#dd').dialog({ 
            autoOpen: true, 
            modal:  true, 
            overlay: { opacity: 0.5, background: 'black'}, 
            title:  'Select the date:', 
            height:  215, 
            width:  234, 
            draggable: false, 
            resizable: false 

       });//end of dialog_atip 


var datePickerValue = "" 

$("#d1").show().unbind().datepicker().datepicker("show").change(function() { 
    //$('#d1').datepicker({onSelect:datePickerValue = $(this).val() }).hide(); 
    $('#d1').datepicker({onSelect:datePickerValue = $(this).val() }) 
    alert("You picked: " + datePickerValue); 
    $("#dd").dialog("close") 
}); 



}//end of window.onload 


</script> 


</head> 

<body> 
<div style="display:none" id="dd"> 
<div id="d1"> 
</div> 
</body> 

</html>

來源

2012-08-29 Jason Kelly

您可以做的是，在＃d1上爲keycode == 13添加一個偵聽器，然後單擊輸入中的當前鏈接。 – karthikr

的有源元件具有類.ui-state-active所以當按下Enter鍵，這樣你可以模擬元素點擊：

$(document).on('keypress', function (e){ 
    if(e.which == 13) 
    { 
     $('.ui-state-active').click(); 
    } 
});

這裏有一個fiddle。焦點必須放在文檔上才能在那裏工作（單擊輸出上的任意位置，然後按回車鍵）。

來源

2012-08-29 19:19:29

這很好。但是，有沒有辦法使得只有當焦點位於對話框窗口而不是整個html文檔時，回車鍵纔會起作用？ –

當然，由於對話框是模態的，您可以檢查它是否打開。 'if（e.which === 13 && $（'＃dd'）。dialog（'isOpen'）=== true）'http://jsfiddle.net/9hUsU/3/ –

在JQuery UI對話框中輸入關鍵行爲

回答

相關問題