Tab键触发时日期选择器始终隐藏的可访问性问题及解决问询

需求 #

• Tab键聚焦出生日期输入框后，再次按Tab键打开日期选择器，支持键盘导航
• 第三次按Tab键关闭选择器并将焦点移至下一个表单元素

当前代码 #

<input id="BirthDate.0" name="BirthDate.0" class="input-sm input_mask mask_date form-control hasDatepicker" onchange="updateFieldGrid('UpdateField', this)" style="" value="" type="text" aria-label="Birth Date" size="11" maxlength="10" placeholder="mm/dd/yyyy" autocomplete="off">

$('input[type="text"].hasDatepicker').keydown(function(event) {
    var target = $(event.target);
    if(event.keyCode == 9) {
        if(!target.datepicker("widget").is(":visible")) {
            target.datepicker("show");
        } else {
            target.datepicker("hide");
        }
    }
});

问题分析 #

当前代码第一次按Tab能打开日期选择器，但第二次按Tab时，target.datepicker("widget").is(":visible")始终返回false，无法关闭选择器。原因是jQuery UI 1.13.2的_doKeyDown方法中，默认逻辑会在Tab键触发时先隐藏日期选择器，且该默认事件的执行优先级高于自定义的keydown事件，导致自定义代码判断时选择器已经被隐藏。

解决方案 #

通过重写jQuery UI日期选择器的_doKeyDown方法，覆盖默认的Tab键处理逻辑：

// 保存原有的_doKeyDown方法，保留其他按键的默认处理逻辑
var originalDoKeyDown = $.datepicker._doKeyDown;

// 重写日期选择器的_doKeyDown方法
$.datepicker._doKeyDown = function(event) {
  var input = event.target;
  var $input = $(input);
  
  // 仅处理目标输入框的Tab键事件
  if (event.keyCode === 9 && $input.hasClass('hasDatepicker')) {
    // 阻止默认Tab切换和jQuery UI的默认隐藏行为
    event.preventDefault();
    event.stopPropagation();
    
    var isPickerVisible = $input.datepicker("widget").is(":visible");
    
    if (!isPickerVisible) {
      // 打开日期选择器
      $input.datepicker("show");
      // 延迟聚焦到选择器内第一个可交互日期，确保键盘导航可用
      setTimeout(function() {
        $input.datepicker("widget").find(".ui-state-default:visible").first().focus();
      }, 10);
    } else {
      // 关闭日期选择器并将焦点移至下一个表单元素
      $input.datepicker("hide");
      var nextInput = $input.nextAll(':input:visible:not([disabled])').first();
      if (nextInput.length) {
        nextInput.focus();
      }
    }
    return; // 跳过原方法的默认Tab键处理
  }
  
  // 其他按键事件仍使用原方法处理
  originalDoKeyDown.apply(this, arguments);
};

说明 #

1. 先保存原_doKeyDown方法，避免丢失其他按键（如方向键、回车）的默认功能
2. 通过event.preventDefault()和event.stopPropagation()阻止默认的Tab切换行为及jQuery UI的自动隐藏逻辑
3. 打开选择器后自动聚焦到第一个日期单元格，确保用户可以直接用键盘导航选择日期
4. 关闭选择器后自动将焦点移至下一个可用表单元素，符合需求中的流程

内容的提问来源于stack exchange，提问作者Wes