关于html中的tabindex

发现问题：

• 今天在使用select2这个优化select标签插件时，发现其搜索框无法输入值。

Paste_Image.png

• 经过初步测试，发现该问题是在使用bootstrap的模态框下产生的问题。（当然只是定位到了问题的出现场景）

• 通过和非模态框下使用select2插件对比，最终发现问题出在tabindex的设置上。

在w3cschool中这样解释tabindex:

tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。

tabindex详细说明：

• tabindex默认值为0。

• tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序(即焦点的顺序) ，其值从1-32767。

• TAB键的控制将从设置的值开始1顺序移动到最大值，然后以默认值0结束。

• 而若把tabIndex属性设为一个负值（如tabIndex="-1"），那么这个链接将被排除在TAB键的序列之外。（例：bootstrap的模态框打开时，TAB键会先从tabindex="-1"的模态框开始移动。）

• tabindex的设置值相同的情况下，一句在页面中出现的先后顺序来移动。

解决问题：

     了解了上述关于tabindex的信息之后，终于理解为什么在模态框中select2插件生成的搜索框为什么不起作用了。

• 模态框

Paste_Image.png

• select

Paste_Image.png

总结：

    这样就能理解这个问题了，modal设置的tabindex="-1"出现后就已经阻止了后面select中设置的tabindex="-1"，或者可以说同一个页面中不能同时出现两次tabindex="-1"。

测试：http://www.w3school.com.cn/tiy/t.asp?f=html_standard_tabindex

参考资料：http://blog.163.com/huan12_8/blog/static/1305190902011274739628/