jQuery UI datepicker：配置键盘快捷键答案

【问题标题】：jQuery UI datepicker: Configure keyboard shortcutsjQuery UI datepicker：配置键盘快捷键
【发布时间】：2012-09-17 12:50:34
【问题描述】：

我使用jQuery UI datepicker 让用户选择日期。它有一些快捷键，因此可以使用键盘进行控制：

page up/down      - previous/next month
ctrl+page up/down - previous/next year
ctrl+home         - current month or open when closed
ctrl+left/right   - previous/next day
ctrl+up/down      - previous/next week
enter             - accept the selected date
ctrl+end          - close and erase the date
escape            - close the datepicker without selection

但这对我来说似乎不是用户友好的。在我阅读文档之前，我没有发现自己如何使用键盘选择日期。我想只有少数用户会发现他们必须按“CTRL + 箭头键”来选择日期。

因此，我想将键盘快捷键替换为其他快捷键。特别是我希望用户在几天和几周之间使用箭头键导航时不必按“Control”键。

因为我在文档I tried to achieve this aim using some custom javascript 中没有找到有关此的任何配置，我在该文档中侦听键盘事件并手动设置日期。但它会从一个问题引向另一个问题：

只有在选择第一个日期后才能正常工作
当用户在仅使用箭头键导航后使用“CTRL + 箭头键”时会产生干扰
与使用日期选择器原始键盘控件的“CTRL + 箭头键”导航时不同，输入字段中的日期会立即更新
由于event.preventDefault()，浏览器的其他快捷方式不起作用

我知道所有这些问题都可以通过额外的 Javascript 再次解决，但如果我能以某种方式进行配置，我会更喜欢它。

可以配置jQuery UI datepicker的快捷方式吗？

【问题讨论】：

FWIW 我认为您的键盘快捷键实际上比内置快捷键更直观。

标签： javascript jquery jquery-ui

【解决方案1】：

这不能通过日期选择器进行配置。您将不得不更改 _doKeyDown 方法 source here。

最简单的方法是扩展小部件。它看起来像这样：

$.extend($.datepicker, {
     _doKeyDown: function(event){
           //copy original source here with different
           //values and conditions in the switch statement
     }
});

【讨论】：

看起来很有希望，但I tried this 它给了我一个“未捕获的类型错误：对象不是函数”（使用谷歌浏览器）。对$.widget函数不熟悉，这种情况如何正确调用？
嘿，抱歉，我忘记了不能通过小部件工厂扩展日期选择器...而只是使用扩展...更新jsfiddle.net/vH5SX/3
@w4rumy 您的代码也可以正常工作，请参见此处：jsfiddle.net/BerkerYuceer/stakv 我只是做了一些小改动，而且我还在寻找对 datepicker 的键盘访问，而您只是让我想到了它。谢谢!
@BerkerYüceer，很好，谢谢。我唯一的建议是在函数的开头添加e.preventDefault()，以防止在使用箭头键时文本光标在输入字段周围移动。 Updated jsfiddle.
实际上updated version 在 TAB 键检查之后移动了e.preventDefault()，所以我们仍然可以跳出输入字段。

【解决方案2】：

您可以查看此插件： http://hanshillen.github.io/jqtest/#goto_datepicker

更多可访问性选项。

【讨论】：

仅链接的答案不好，因为它们可能会消失，并且答案对其他人无用。请包括相关部分作为报价。谢谢。

【解决方案3】：

如果它是Jquery date picker，那么默认情况下它将支持所有这些快捷方式。可能存在一个问题，即Theme。您可以使用Jquery 站点本身中给出的CSS CDN。然后，焦点将是可见的。这是可访问性的一个很好的点击。

【讨论】：

【解决方案4】：

如果您想替换其中一个快捷方式并且不喜欢在更新 jquery ui 库的情况下从存储库中处理代码，请使用：

// original key down callback
var doKeyDown = $.datepicker._doKeyDown;
$.extend($.datepicker, {
    _doKeyDown: function(event){

        if(event.which !== $.ui.keyCode.ENTER) {
            doKeyDown(event);
        }
        else {
            //do something else
        }
    }
});

在覆盖之前保留 _doKeyDown 的引用并为所有其他快捷方式调用它。

【讨论】：