HTML TabIndex属性
TabIndex作用:
tabindex:全局属性。指示其元素是否可以聚焦(获得焦点),以及它是否/在何处参与顺序键盘导航(因通常使用tab键操作,顾因此得名)。
当使用tab键在网页控件中进行导航时,将首先移动到具有最小tabindex属性值的控件上,最后在具有最大tabindex属性值的控件上结束。
TabIndex的用法:
<a href="//www.baidu.com" tabindex="2">百度</a>
<a href="//www.sina.com" tabindex = "1">新浪</a>
HTML 4.0.1与HTML5之间的差异:
在HTML5中,tabindex属性可用于任何的HTML元素(它会验证任何HTML元素。但不一定是有用)。
在HTML 4.0.1中,tabindex属性可用于:<a>,<area>,<button>,<input>,<object>,<select>和<textarea>。
浏览器兼容性:
TabIndex的方法:
tabindex接受一个整数作为值,根据值得不同,具有不同的结果:
- tabindex=负值(通常是tabindex="-1"),表示元素是可聚焦的,但是不能通过键盘进行导航来访问到该元素。在使用tab键时,此元素被忽略。用JS做页面小组件内部键盘导航的时候非常有用,注意:如果使用-1值时,onfocus与onblur事件仍能启动。
- tabindex="0"(默认),表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的,即使采用了浮动改变了页面中显示的顺序,依然是按照HTML文档中的顺序来定位。
- tabindex=正值(32767是临界点,具体请参考注意事项),表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex的数值递增而滞后获取焦点。如果多个元素拥有相同的tabindex,它们的相对顺序按照它们在当前DOM中的先后顺序决定。
根据键盘序列导航的顺序,值为0、非法值、或者没有tabindex值的元素应该放置在tabindex值为正值的元素后面。
如果我们在<div>上设置了tabindex属性,它的子元素内容不能使用箭头键来滚动,除非我们在内容上也设置tabindex。
注意事项:tabindex的最大值不应超过32767。在IE中,tabindex范围从1~32767之间(包括32767),在Firefox、Chrome无限制,不过一旦超出32767时,顺序跟tabindex=0时一样。如果没有指定,它的默认值为-1;
HTML TabIndex属性的更多相关文章
- html中input标签的tabindex属性
当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...
- div/span等获取焦点问题(tabindex属性的简单理解)
1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...
- tabindex属性
1. tabindex的用法: 可以设置tab键在控件中的移动顺序. 以下元素支持tabindex属性:<a> <input> <textarea> <are ...
- (转)TabIndex 属性
html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序. 把控件的tabIndex属性设成1到32767的一个值,就可以把这个控件加入到TAB键的序列中. 这 ...
- tabindex属性用法
支持tabindex属性的元素:<a> <input> <textarea> <area> <select> <button> ...
- tabindex 属性
tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时). 语法:<element tabindex="number">规定元素的 tab 键控 ...
- TabIndex 属性 Tabindex="-1" 与Tabindex="0"、任意数字 (收录)
TabIndex 属性 Tabindex="-1" 与Tabindex="0".任意数字 html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动 ...
- bootstrap模态框嵌套、tabindex属性、去除阴影
模态框嵌套 在开发中,遇到需要通过点击事件触发第一个模态框,触发后通过事件唤起第二个模态框,并且通过事件触发第三个模态框:即模态框嵌套. 模态框嵌套需要用一个模态框包裹所涉及嵌套的模态框,从而点击触发 ...
- HTML tabindex 属性
tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时).
随机推荐
- 数据库中间件MyCat学习总结(1)——MyCat入门简介
为什么需要MyCat? 虽然云计算时代,传统数据库存在着先天性的弊端,但是NoSQL数据库又无法将其替代.如果传统数据易于扩展,可切分,就可以避免单机(单库)的性能缺陷. MyCat的目标就是:低成本 ...
- poj 1364 查分约束
#include<stdio.h> #include<iostream> #include<stack> #include<string.h> usin ...
- Ubuntu下非常规方法安装绿色软件(压缩包)
继上一篇http://www.cnblogs.com/EasonJim/p/7117567.html文章中说的常规方式安装的软件,都会自动在命令行及Dash Home中体现. 但是如果是使用压缩包进行 ...
- MyBatis与Spring MVC结合时,使用DAO注入出现:Invocation of init method failed; nested exception is java.lang.IllegalArgumentException: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required
错误源自使用了这个例子:http://www.yihaomen.com/article/java/336.htm,如果运行时会出现如下错误: Invocation of init method fai ...
- C++对象模型——"无继承"情况下的对象构造(第五章)
5.1 "无继承"情况下的对象构造 考虑以下这个程序片段: 1 Point global; 2 3 Point foobar() 4 { 5 Point local; 6 Poin ...
- 从2月14号開始,上传AppStore会碰到:Failed to locate or generate matching signing assets
从2月14号開始,上传AppStore时可能会碰到这个问题: Failed to locate or generate matching signing assets Xcode attempted ...
- HDU 4771 Stealing Harry Potter's Precious dfs+bfs
Stealing Harry Potter's Precious Problem Description Harry Potter has some precious. For example, hi ...
- uploadify3.2.1版插件在ASP.NET中的使用
0.先去官网下载插件 下载uploadify3.2.1插件 解压后只需要一下文件: (1) jQuery.uploadify.min.js (2) uploadify.css (3) uploadif ...
- P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper 状压dp
这个状压dp其实很明显,n < 18写在前面了当然是状压.状态其实也很好想,但是有点问题,就是如何判断空间是否够大. 再单开一个g数组,存剩余空间就行了. 题干: 题目描述 A little k ...
- Ned的难题
题目描述 Ned再也看不下去Robert的种种恶习,于是他决定出一道题来让他醒悟. Ned的题目是这样: 给出一个有n个数的序列,求其中所有连续子序列的数的最大公因数的乘积模1000000009的值. ...