jQuery UI Datepicker-键盘导航事件? [英] jQuery UI Datepicker - Keyboard Navigation Event?

问题描述

为了使屏幕阅读器可以访问jQuery UI Datepicker，我需要用突出显示的当前日期填充一个隐藏的div.

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.

问题在于，没有与键盘导航(CTRL +箭头键)相关的事件.

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

在这种情况下，我将如何检测用户何时在不同日期之间导航，以便获取突出显示的日期并将其填充到隐藏的div中?

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);
});

推荐答案

您可以使用keydown事件来检查是否已按下 Ctrl 键和箭头键.您可以查询按键的keyCode，以确定是否已按下箭头键.箭头键keyCode的范围是37到40(含). 37 =左，38 =上，39 =右，40 =下.

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，则返回true，反之亦然. evt.keyCode >= 37 && evt.keyCode <= 40确保仅在按下箭头键时更新#liveRegion div.

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

这篇关于jQuery UI Datepicker-键盘导航事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！