Javascript 使用TAB键关注jQuery UI日历的可访问性

我们使用jQuery显示日历控件，并向用户提供一个选项，让用户不用鼠标就可以从键盘上选择日期

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

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

HTML

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

代码修复

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

$("#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
                }
            });

---

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

---

显示datepicker内置了特定的键盘交互，可能是因为他们意识到tab不是一个可行的选项。这篇文章讨论了如何更改这些字段，这可能会对您有所帮助。

您是否希望在日历上的字段和日期之间进行制表，然后转到下一个字段？@Jason是的，我想在所有日期之间进行制表。您是否最终找到了解决问题的适当方法？如果是这样的话，你能分享一下吗？@ScottMcConnell post用我最后编写的代码修复程序进行了更新，以支持datepicker上的可访问性。@Lokesh-谢谢你，这些信息非常有用。谢谢你给我指针。

$("#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
                }
            });