jQuery UI对话框中Checkbox无法获取焦点问题求助

核心问题分析 #

• iframe异步加载导致焦点时机错误：你在dialog的open事件里直接调用focus，但此时iframe内的内容还没加载完成，根本找不到目标checkbox元素，自然设置无效。
• 旧版本模态对话框焦点捕获bug：jQuery UI 1.8.4的模态对话框存在焦点限制失效的问题，导致Tab键能跳出对话框到后方元素。
• 上下文菜单的焦点残留：上下文菜单关闭后，焦点没有正确传递到对话框容器，进一步影响内部元素的焦点获取。

具体修复方案 #

1. 延迟焦点设置到iframe加载完成后

把焦点设置代码移到iframe的load事件里，确保内容加载完毕后再操作：

$("#modal_window iframe")
  .attr('src', "../Info?op=view&nosidemenu=1&patient_id="+patient_id+"&closeOnQuit=1")
  .load(function() {
    resizeIframe(this);
    // 访问iframe内部DOM需用contents()方法（同域场景下有效）
    $(this).contents().find('input[type="checkbox"]').first().focus();
  });

注意：若iframe与主页面跨域，浏览器同源策略会限制contents()访问内部DOM，此时需在iframe页面自身的onload事件中设置焦点。

2. 修复模态对话框的Tab焦点循环

给dialog绑定keydown事件，手动限制Tab键的焦点范围在对话框内部：

$("#modal_window").dialog({
  modal:  true,
  show:   'scale',
  hide:   'scale',
  width:  'auto',
  height: 'auto',
  position: [670, 115],
  open: function(event,ui) {
    // 先让对话框容器获取焦点，建立焦点起点
    $(this).focus();
  },
  keydown: function(e) {
    if (e.keyCode === 9) { // 监听Tab键
      var focusable = $(this).find(':focusable');
      var first = focusable.first();
      var last = focusable.last();

      if (e.shiftKey) { // 反向Tab
        if (document.activeElement === first[0]) {
          last.focus();
          e.preventDefault();
        }
      } else { // 正向Tab
        if (document.activeElement === last[0]) {
          first.focus();
          e.preventDefault();
        }
      }
    }
  },
  close:  function() {
    window.location.reload();
  }
});

:focusable是jQuery UI内置选择器，1.8.4版本支持，可匹配所有可获取焦点的元素。

3. 清除上下文菜单的焦点残留

在打开对话框前，先清除上下文菜单的焦点，确保焦点能正常传递：

fn: function(el) {
  // 清除上下文菜单的焦点残留
  $('body').focus();
  // 再初始化对话框和iframe
  $("#modal_window iframe")
    .attr('src', "../Info?op=view&nosidemenu=1&patient_id="+patient_id+"&closeOnQuit=1")
    .load(function() {
      resizeIframe(this);
      $(this).contents().find('input[type="checkbox"]').first().focus();
    });
  $("#modal_window").dialog({
    // 其他配置项...
  });
}

额外提示 #

jQuery UI 1.8.4是2010年的老旧版本，很多焦点管理的bug在后续版本中已修复。如果项目允许，建议升级到较新版本，能从根源减少此类问题。

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