jQuery UI Datepicker - 鍵盤導航事件？

Question

爲了讓屏幕閱讀器可以訪問jQuery UI Datepicker，我需要填充隱藏的div，並使用當前正在高亮顯示的日期。

的問題是，沒有一個與鍵盤導航（CTRL +箭頭鍵）相關聯的事件。

在這種情況下，當用戶在不同的日期之間進行導航，這樣我可以獲取高亮顯示的日期和隱藏的div填充它我將如何檢測？

// how to detect CTRL + Arrow Key Event?? 
$("#datepicker").on("<CTRL + Arrow Key event>", function(){ 
    var message = ""+$(".ui-state-hover").html()+ 
       " "+$(".ui-datepicker-month").html()+ 
       " "+$(".ui-datepicker-year").html(); 
    $('#liveRegion').html(message); 
}); 

Answer 1

您可以使用​​事件來檢查按Ctrl關鍵是結合按下帶有箭頭鍵。您可以查詢按鍵的keyCode以確定是否按下了箭頭鍵。箭頭鍵keyCode s範圍從37到40（含）。 37 =左，38 =上，39 =右，40 =下。

evt.ctrlKey回報true如果它被按下，反之亦然。 evt.keyCode >= 37 && evt.keyCode <= 40確保只有在箭頭鍵被按下時才更新#liveRegiondiv。

$('#datepicker').keydown(function(evt) { 
    if (evt.ctrlKey && evt.keyCode >= 37 && evt.keyCode <= 40) { 
    var message = "" + $(".ui-state-hover").html() + 
     " " + $(".ui-datepicker-month").html() + 
     " " + $(".ui-datepicker-year").html(); 
    $('#liveRegion').html(message); 
    } 
}); 

請參閱下面的演示示例。如果解決方案不適合您的需求，請不要猶豫，讓我知道。

Fiddle Demo