javascript - 专注于使用 TAB 键的 jQuery UI 日历可访问性

Question

我们正在使用 jQuery datepicker显示日历控件并为用户提供一个选项，让用户无需使用鼠标即可从键盘选择日期。

在测试给定表单的 Tab 键可访问性时，我注意到当焦点到达日期字段时，日历弹出窗口出现在屏幕上，但是当我按下 Tab再次按下 kbd> 键，焦点将转移到下一个输入控件，但不会转移到日历弹出窗口。

有没有办法在弹出窗口聚焦后立即将焦点转移到日历控件？

HTML

<input type="text" value="first input field">
<input type="text" id="myDate">
<input type="text" value="second input field">

JS

$(document).ready(function() {
    $("#myDate").datepicker();
});

Demo

代码修复

尝试各种代码修复后，最终编写了以下代码以启用日期选择器的可访问性。

$("#datepicker").attr('readonly', 'readonly')
            .datepicker({})
            .keydown(function(event) {
                event.preventDefault();
                event.stopPropagation();
                //   KEY MAP
                //  [TAB: 9, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40]
                var code = event.keyCode || event.which;
                // If key is not TAB
                if (code != '9') {
                    // And arrow keys used "for performance on other keys"
                    if (code == '37' || code == '38' || code == '39' || code == '40') {
                        // Get current date
                        var parts = $(this).val().split("/"),
                            currentDate = new Date(parts[2], parts[0] - 1, parts[1]);
                        // Show next/previous day/week 
                        switch (code) {
                            // LEFT, -1 day
                            case 37:
                                currentDate.setDate(currentDate.getDate() - 1);
                                break;
                                // UP, -1 week
                            case 38:
                                currentDate.setDate(currentDate.getDate() - 7);
                                if (!_.isNull(currentDate)) {
                                    $(this).datepicker("setDate", currentDate);
                                    return false;
                                }

                                break;
                                // RIGHT, +1 day
                            case 39:
                                currentDate.setDate(currentDate.getDate() + 1);
                                break;
                                // DOWN, +1 week
                            case 40:
                                currentDate.setDate(currentDate.getDate() + 7);
                                break;
                        }
                    } else {
                        return false;
                    } // If other keys pressed.. return false
                }
            });

Answer 1

我认为日期选择器字段/控件不能通过选项卡进行切换。

http://api.jqueryui.com/datepicker/显示日期选择器内置了特定的键盘交互，也许是因为他们意识到选项卡不是一个可行的选择。这篇文章，jQuery UI datepicker: Configure keyboard shortcuts ，谈论更改它们可能会对您有所帮助。