为键盘快捷键集中一个内联 jQuery UI Datepicker？答案

【问题标题】：Focus an inline jQuery UI Datepicker for the keyboard shortcuts?为键盘快捷键集中一个内联 jQuery UI Datepicker？
【发布时间】：2015-01-14 15:52:34
【问题描述】：

我一直在网上搜索此问题的答案或示例，但到目前为止还不够。

jQuery UI 为 Datepicker 小部件提供了一些很棒的“开箱即用”键盘快捷键，但它们似乎只有在您在相关输入框内聚焦/单击后打开小部件时才有效。

我正在使用附加到 div 标记的 Datepicker 的“内联”版本，并试图找出一种方法来聚焦它，以便我仍然可以使用 jQuery UI 标准的键盘快捷键。（用于键盘辅助功能）

有人做过吗？非常感谢任何建议。

【问题讨论】：

标签： jquery jquery-ui datepicker accessibility

【解决方案1】：

我不确定我是否完全理解了这个问题，但一种常见的做法是在使用 JavaScript 移动焦点之前将tabindex="-1" 添加到元素中。

编辑：

好的，我对此进行了更深入的研究。所有 keycode 事件都通过一个控制语句过滤，该语句检查 _datepickerShowing 属性是否设置为 true。此属性在构造函数中设置为 false。将 _datepickerShowing 设置为 true 的唯一方法是通过 _showDatepicker，但它必须通过这个：

if (!inst.inline) {
    // ...
    $.datepicker._datepickerShowing = true;

_datepickerShowing 也将在您点击标签后立即设置为 false。

我找到了这篇关于如何Show Hide jQuery UI DatePicker Programmatically 的文章，但这显然是用于输入日期选择器和fails a simple test I made with jsfiddle。

除了 fork 库或在 github 上发布问题之外，我认为这是一个失败的原因。

也许有一种方法可以配置输入类型以满足您的需求。你想要的具体效果是什么？一直显示？

【讨论】：

感谢您的回复，但这不是问题所在。如果您熟悉 jQuery UI，则基本上有两种类型的日期选择器：一种是输入框或按钮的弹出窗口，另一种是“内联”或分配给 div 或 span，并且始终存在。 jQuery 为弹出窗口提供了一些很酷的键盘功能，但无法在“内联”版本中使用它们。
感谢您的 cmets。是的，日期选择器将始终显示为主页的一部分。我确实通过使用一些 jquery 和 javascript 来处理使用日历元素的类的事件来绕过这个问题。我可以在这里发布它作为替代答案。
@Maulzal - 请做，我也有同样的问题 :)。
斯蒂芬，很抱歉回复晚了，我会作为答案发布。

【解决方案2】：

对于 Stephen Harris，这是我用来将诸如上一个和下一个等内容集中在内联日历上并使用回车键执行点击的一些 JavaScript 示例：

        $(".ui-datepicker td a.calendar-event").attr("tabindex", "0");
        $(".ui-datepicker td a.calendar-event").addClass("focus-element-flag");
        $("#datepicker").on('keydown', '.calendar-event', function (e) {
            if (e.which == 13) {
                $(this).trigger("click");
                $(".ui-datepicker-prev").focus();
            }
        });

        $("#datepicker").on('keydown', '.ui-datepicker-prev', function (e) {
            if (e.which == 13) {
                $(this).trigger("click");
                $(".ui-datepicker-prev").focus();
            }
        });
        $("#datepicker").on('keydown', '.ui-datepicker-next', function (e) {
            if (e.which == 13) {
                $(this).trigger("click");
                $(".ui-datepicker-next").focus();
            }
        });

【讨论】：