解决 bootstrap 的 modal 对话框按 TAB 会离开对话框的一段代码

bootstrap 是 twitter 出品的一个非常好的 css 框架，全球有无数的网站使用了他。他的 modal 对话框组件有个键盘访问的 bug 就是按 TAB 键可以离开对话框内部。我查看源代码发现原因是因为他使用了 focusin 事件。但是一般情况下，我们的对话框代码都是在html 文档的末尾，那么也就意味着按 TAB 键切换到对话框最后一个焦点元素之后，继续按 TAB 键，就会离开网页控件而进入地址栏区域。解决的办法其实也很简单，就是在 body 元素内部的末尾插入一个具有 tabindex 属性的元素即可。具体的做法就是在 modal的 shown 事件里插入这个元素，在 hidden 事件里销毁这个元素，或者如果考虑对话框需要多次弹出的话，就直接把这个元素的 tabindex 属性删除。当然，这个元素不需要被看到，那么就用 .sr-only 让他只对读屏软件有效好了。示例代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


$("#dialog").on("shown.bs.modal", function(e) {
  var sr = $('#sr-only-modal');
  if(sr.length < 1) {
    $('body').append('<div class="sr-only" id="sr-only-modal" tabindex="0"></div>');
  } else {
    sr.attr('tabindex','0');
  }
});
$("#dialog").on("hidden.bs.modal", function(e) {
  $('#sr-only-modal').removeAttr('tabindex');
});

解决 bootstrap 的 modal 对话框按 TAB 会离开对话框的一段代码

相关文章：