Question

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

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

一旦关注弹出窗口，有没有办法将焦点转移到日历控件？

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

我不认为datepicker字段/控件可以通过选项卡进行选项卡。

http://api.jqueryui.com/datepicker/表明日期选择器内置了特定的键盘交互，可能是因为他们意识到选项卡不是一个可行的选项。这篇文章jQuery UI datepicker: Configure keyboard shortcuts讨论了如何改变它们，这可能对你有帮助。

使用TAB键专注于jQuery UI Calender可访问性

1 个答案: