bootstrap-keyboard-tagIndex

2016-06-28

这两天在 Coursera 上学习 Bootstrap
第四周的作业是把非 JavaScript 实现的 Modal 改成用 JavaScript 实现（https://www.coursera.org/learn/web-frameworks/peer/jAXUU/assignment-4-detailed-instructions-and-submission）

按照 http://getbootstrap.com/javascript/#modals-methods 找到了解决方案：

<script>
    $('#reserveButton').on('click', function () {
        $('#reserveModal').modal('toggle');
    });
</script>

作业是解决了，但是发现一个小问题：不管我怎么改keyboard属性，都不能用esc关闭modal

搜了一下得知：在modal所在div中加入tabindex="-1"属性即可
那么问题又来了…这个tabindex="-1"是什么鬼…

搜索加测试了一下之后终于搞清楚了
tabindex用来帮助键盘党使用tab键定位网页元素，按其值由小到大跳转，默认是 0
如果值相等，则按先后顺序跳转

在未加入tabindex="-1"时，modal和主页中所有元素值都是 0
当前键盘的焦点仍然在主页而非modal上，相当于在主页按esc，modal监听不到所以无任何反应
加入tabindex="-1"后，modal的优先级最高，键盘焦点到了modal上，这时再按esc就能正确触发关闭modal事件了

Air9

bootstrap-keyboard-tagIndex

参考