jQuery UI Datepicker - Keyboard Navigation Event?

问题

In order to make the jQuery UI Datepicker accessible to screen readers, I'm required to populate a hidden div with the current date that is being highlighted.

The problem is that there isn't an event that is associated with keyboard navigation (CTRL + Arrow Keys).

In this case, how would I detect when the user is navigating between different dates so that I can fetch the highlighted date and populate it in the hidden 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);
});

回答1:

You could use the keydown event to check if the Ctrl key has been pressed in conjunction with an arrow key. You can query the keyCode of a key press to determine if an arrow key has been pressed. The arrow key keyCodes range from 37 to 40 (inclusive). 37 = left, 38 = up, 39 = right and 40 = down.

evt.ctrlKey returns true if it has been pressed and vice versa. evt.keyCode >= 37 && evt.keyCode <= 40 ensures that the #liveRegion div is only updated if an arrow key has been pressed.

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

Please see the demo below for a working example. If the solution isn't suitable for your needs, don't hesitate to let me know.

Fiddle Demo

来源：https://stackoverflow.com/questions/35524074/jquery-ui-datepicker-keyboard-navigation-event