jQuery UI 日期选择器 - 键盘导航事件？

Question

为了让屏幕阅读器可以访问 jQuery UI 日期选择器，我需要用突出显示的当前日期填充隐藏的 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

您可以使用 keydown 事件来检查 Ctrl 键是否与箭头键一起按下。您可以查询按键的 keyCode 以确定是否按下了箭头键。方向键keyCodes的范围是37到40（含）。 37 = 左，38 = 上，39 = 右，40 = 下。

evt.ctrlKey returns true 如果已经按下，反之亦然。 evt.keyCode >= 37 && evt.keyCode <= 40 确保 #liveRegion div 仅在按下箭头键时更新。

$('#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

jQuery UI 日期选择器 - 键盘导航事件？

jQuery UI Datepicker - Keyboard Navigation Event?

jquery

jquery-ui

jquery-ui-datepicker