<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{ margin:0; padding:0; } #model{ width:500px; height:300px; margin-left:-250px; margin-top:-150px; background-color: blue; position:fixed; top:50%; left:50%; z-index: 200; } #outer{ position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; padding-top:10%; text-align:center; background-repeat:no-repeat; background-position:center center; background-color:#000; background-color:rgba(0,0,0,0.5); filter:alpha(opacity=50); display: none; } </style> </head> <body> <button id="show">弹出模态框</button> <div id="outer"> <div tabindex="-1" id="model"></div> </div> <script> document.getElementById("model").onblur=function(){ document.getElementById("outer").style.display="none" } document.getElementById("model").onfocus=function(){ document.getElementById("outer").style.display="block" } document.getElementById("show").onclick=function(){ document.getElementById("outer").style.display="block" } </script> </body> </html>
html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。
把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。
这样，当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动。
如果有两个控件的tabIndex属性相同，则以控件在html代码中出现的顺序为准。
默认的tabIndex属性为 0 ，将排列在在所有指定tabIndex的控件之后。
而若把tabIndex属性设为一个负值（如tabIndex="-1"），那么这个链接将被排除在TAB键的序列之外。 如果最初选择了[Tab]键，带这个输入栏的网页会将光标移动到firstName栏。
在给tabIndex特性赋值时，要留意几个问题。下面是几个赋值规则：
带0值tabIndex的元素根据源代码（或默认页面行为）进行排序。
大于0的tabIndex值设定其tab顺序。所有带正tabIndex值的元素出现在所有带0 tabIndex值的元素之前。
如果你犯了一个错误，把同一个tabIndex赋予给多个元素，像其它元素一样，它们会以一个0值tabIndex进行处理。
将tabIndex赋值为-1，则在使用[Tab]键时，此元素被忽略。注意：如果使用-1值时，onfocus与onblur事件仍被启动。 tabIndex的值可为0至32767之间的任意数字
原文地址https://blog.csdn.net/tom0008668/article/details/64904752