jQuery UI Datepicker – 键盘导航事件?
为了使屏幕阅读器可以访问jQuery UI Datepicker,我需要使用正在突出显示的当前日期填充隐藏的div。
问题是没有与键盘导航相关的事件(CTRL +箭头键)。
在这种情况下,我如何检测用户何时在不同日期之间导航,以便我可以获取突出显示的日期并将其填充到隐藏的div中?
// how to detect CTRL + Arrow Key Event?? $("#datepicker").on("", 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 =下。
如果已按下,则evt.ctrlKey
返回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); } });
请参阅下面的演示以获取一个工作示例。 如果解决方案不适合您的需求,请随时告诉我。
小提琴演示