javascript tabIndex属性

tabIndex 的用处很简单，就是利用tab键遍历页面的表单元素和链接，按照tabindex的大小决定顺序。虽然微不足道，但细节处见真功夫，这是任何一个WEB应用应当具备的亲用力，保证用户在没有鼠标的情况下（如WAP）仍然可以正常使用。
下面的例子，为了突现tabIndex控制焦点跳转的能力，特意把顺序打乱了。请先选中第一个文本域，然后按tab键观察。
 

点击运行可以看到效果:<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<FCK:meta charset="gb2312" />
<FCK:meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>tabIndex By 司徒正美</title>
<script>
window.onload = function(){
var els = document.getElementsByTagName("input");
for(var i=0,n=els.length;i<n;i++){
els[i].onfocus = function(){
this.style.cssText='background:#69C;border-color:#6cc;';
};
els[i].onblur = function(){
this.style.cssText='background:#fff;border-color:#000;';
};
}
}
</script>
</head>
<body>
<form name="nasami">
<input tabindex="1" value="第一个" type="text" >
<input tabindex="3" value="第三个" type="text" >
<input tabindex="5" value="第五个" type="text" >
<input tabindex="6" value="第六个" type="text" >
<input tabindex="4" value="第四个" type="text" >
<input tabindex="2" value="第二个" type="text" >
</form>
</body>
</html>

  [Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

 

根据这篇文章的介绍，W3C DOM与Netscape仅是把tabIndex添加到有限的几个元素上：a, area, button, input, object, select, textarea，也就是所谓的表单元素与链接。IE4则比它多以下元素： applet, body, div, embed, isindex, marquee, span, table, 与td，到了IE5，几乎所有能渲染的元素都拥有这属性（像br元素就是不能渲染的）。tabIndex的值，根据W3C的规定，范围在0到 32767。

在jQuery的源码中，讲到attr部分提供了一条链接，是专门说明如何用javascript设置获取与移除tabIndex属性，不过已有些日子了，许多主流浏览器都更新了版本。因此我再测试了一次。测试程序见下面的运行框：
 

点击运行可以看到效果:<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tabIndex By 司徒正美</title>
<script type="text/<a style='color:blue;' href='http://www.waweb.cn/article/slist-1-1.htm' target='_blank'>javascript</a>">
<!--//--><![CDATA[//><!--
window.onload = function(){
var el = document.getElementById("test");
alert(el.tabIndex)
alert(el.getAttribute("tabindex"))
alert(el.getAttribute("tabIndex"))
}
//--><!]]>
</script>
</head>
<body>
<input tabindex="1" value="test" type="text" id="test">
</body>
</html>

  [Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

 

 

tabindex为1的input元素 IE6 IE7 IE8 FF3.55 opeta10.10 Safari4.0 chrome4.02
el.tabIndex 1 1 1 1 1 1 1
el.getAttribute("tabindex") 1 1 1 1 1 1 1
el.getAttribute("tabIndex") 1 1 1 1 1 1 1

此表格与《Getting, setting, and removing tabindex values with JavaScript》一文中对应的表格相比，全部为1。

我们再来看当表单元素没有显示地设置tabIndex属性时，tabIndex是否存在，存在的话其默认值是多少。

没有tabIndex的input元素 IE6 IE7 IE8 FF3.55 opeta10.10 Safari4.0 chrome4.02
el.tabIndex 0 0 0 0 0 0 0
el.getAttribute("tabindex") 0 0 0 null null null null
el.getAttribute("tabIndex") 0 0 0 null null null null

如果测试对象为一个没有显式设置tabIndex属性的div元素呢？在W3C标准中，只有表单元素与链接才能tabIndex属性。

没有tabIndex的div元素 IE6 IE7 IE8 FF3.55 opeta10.10 Safari4.0 chrome4.02
el.tabIndex 0 0 0 -1 -1 -1 -1
el.getAttribute("tabindex") 0 0 0 null null null null
el.getAttribute("tabIndex") 0 0 0 null null null null

我们看这篇文章，标准浏览器的设定其泾渭分明，-1给那些不该拥有它的元素，0是默认分配给那些表单元素与链接，如果用户定义了就返回用户的认定值，即便它是div。

不过在IE中，非表单元素与链接无论tabIndex是否定义都返回0，那么我们怎么知道元素是否已定义过呢？《Getting, setting,……》给出一个非常好的办法。利用getAttributeNode 获取对应的属性节点。在IE中，如果是默认属性或已定义属性，将会返回一个对象，标准浏览器则只有当我们显示地设置这属性时才返回对象，其他一律为null。在IE中，如果是默认属性，没有为其赋值，它有一个特殊的specified ，显示为false，如果赋值了，则为true。标准浏览器没有这东西，也不需要此东西。

再看为没有tabIndex属性元素赋值的情况el.tabIndex=value就不用说了，肯定行得通，dom 0年代的实现。如果一个元素用setAttribute("tabIndex",3)赋值，注意是大写，那么无论是el.tabIndex还是el.getAttribute("tabIndex")还是el.getAttribute("tabindex")都能得到3。如果是setAttribute("tabindex",3)赋值,IE则全为0，标准浏览器则全为3，因此还是用前者吧。

没有tabIndex的input元素 IE6 IE7 IE8 FF3.55 opeta10.10 Safari4.0 chrome4.02
el.tabIndex=3 3 3 3 3 3 3 3
el.setAttribute("tabIndex",3) 3 3 3 3 3 3 3
el.setAttribute("tabindex",3) 0 0 0 3 3 3 3

最后移除属性的情况，移除结果后分别用el.tabIndex,el.getAttribute("tabIndex"),el.getAttribute("tabindex")测试。谁都没有把握移除干净，从目前的情况来看，只有选择el.removeAttribute("tabIndex")。

tabIndex为3的input元素 IE6 IE7 IE8 FF3.55 opeta10.10 Safari4.0 chrome4.02
el.removeAttribute("tabIndex") 0,0,0 0,0,0 0,0,0 0,null,null 0,null,null 3,null,null 3,null,null
el.removeAttribute("tabindex") 3,3,3 3,3,3 3,3,3 0,null,null 0,null,null 3,null,null 3,null,null
delete el.tabIndex errer errer errer 3,3,3 0,null,null 3,3,3 undefined,null,null
文章源自Web技术之家

 

本文来自:Web技术之家(http://www.waweb.cn/) 详细出处参考：http://waweb.cn/article/26675.htm

转载于:https://www.cnblogs.com/winlj/archive/2009/12/09/1620535.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/423303.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

zookeeper 安装和使用

zookeeper 安装和使用

1.Windows安装和使用zookeeper 之前整理过一篇文章《zookeeper 分布式锁服务》&#xff0c;本文介绍的 Zookeeper 是以 3.4.5 这个稳定版本为基础&#xff0c;最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取&#xff0c;Zookeeper 的安装非常简单&#xf…
阅读更多...
【移植Linux 3.4.2内核第一步】之简单修改

【移植Linux 3.4.2内核第一步】之简单修改

前一阵子已经将U-boot移植好了&#xff0c;从今天开始&#xff0c;我们开始移植linux内核。移植的内核为3.4.2&#xff0c;移植的开发板为&#xff1a;jz2440开发板。 想看之前移植U-boot的记录&#xff0c;可以查看我的博客专栏&#xff0c;点击链接&#xff1a;点击查看U-bo…
阅读更多...
HBase 2.0版本正式发布

HBase 2.0版本正式发布

1.HBase 2.0版本正式发布 关于HBase版本定义 HBase从1.0.0版本开始&#xff0c;在版本定义上正式遵循了Semantic Versioning规范&#xff1a; 一个版本号&#xff0c;由三部分组成&#xff1a; MAJOR.MINOR.PATCH&#xff0c;关于这三部分数字的变更&#xff0c;定义如下&am…
阅读更多...
前端学习（77）：css中常见margin塌陷问题之解决办法

前端学习（77）：css中常见margin塌陷问题之解决办法

塌陷问题 当两个盒子在垂直方向上设置margin值时&#xff0c;会出现一个有趣的塌陷现象。 ①垂直并列 首先设置两个DIV,并为其制定宽高 1 1 /*HTML部分*/2 <body>3 <div class"box1">box1</div>4 <div class"box2">box2…
阅读更多...
HBase2.0 vs HBase1.x 延时比较

HBase2.0 vs HBase1.x 延时比较

hbase2.0已经正式发布&#xff0c;对比之前1.x版本&#xff0c;2.0在读写链路上做了完善的优化&#xff0c;offheap、netty rpc等&#xff0c;这里做个小测试实验对比1.x和2.0在读写上的延时情况。本测试基于特定测试环境与软件版本得到的结果&#xff0c;仅供参考。 测试介绍 …
阅读更多...
【数据结构学习之完全从零实现所有数据结构的代码编写之二】智能指针

【数据结构学习之完全从零实现所有数据结构的代码编写之二】智能指针

今天我们依然暂时不讲解数据结构里面的内容&#xff0c;我们来复习一下昨天学的模板技术用于数据结构编程的思想&#xff0c;给出一个模板技术的实例&#xff1a;智能指针的应用。喜欢看我分享的加我q:1126137994 加我共同学习交流各种技术。 为什么会引入智能指针呢&#xff…
阅读更多...
职责链模式(Chain of Responsibility)

职责链模式(Chain of Responsibility)

重要概念 1. 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。将这个对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一个对象处理它为止。 2.请求是沿着链条传递到有一个处理点对象负责处理这个请求为止。请求者无需…
阅读更多...
Linux网络-数据包的接收流程（基于RTL8139网卡驱动程序）

Linux网络-数据包的接收流程（基于RTL8139网卡驱动程序）

本文将介绍Linux系统中&#xff0c;基于RTL8139网卡驱动程序&#xff0c;是如何一步一步将接收到的数据包传送到内核的网络协议栈的。 下图展示了数据包&#xff08;packet&#xff09;如何进入内存&#xff0c;并被内核的网络模块开始处理&#xff1a; -----| | …
阅读更多...
mootools

mootools

$();// 选择ID为”body_wrap“的元素$(body_wrap);.getElement();// 选择ID为”body_wrap“的元素下面的第一个链接$(body_wrap).getElement(a); or #xxx or .xxx.getElements();// 选择ID为”body_wrap“的元素下面的所有链接$(body_wrap).getElements(a); $(body_wrap).getE…
阅读更多...
图形化界面客户端连接phoenix操作hbase

图形化界面客户端连接phoenix操作hbase

下载客户端软件 DBeaver https://dbeaver.io/download/ 选择对应系统的版本&#xff0c;我这里选择解压版windows64位 创建连接 注意&#xff1a;URL模板就不要一般是默认 选择合适的版本&#xff08;跟你服务器的版本一致&#xff09;&#xff0c;下载jar包 点击测试或完成即…
阅读更多...
【C++深度剖析教程12】数组操作符的重载

【C++深度剖析教程12】数组操作符的重载

之前写的C学习记录忘记打编号了&#xff0c;从今天开始&#xff0c;所有内容&#xff0c;记录编号&#xff0c;方便以后的查阅复习。今天学习的是C中&#xff0c;数组操作符的重载。 上一篇博文写的是介绍C中的字符串类&#xff0c;我们知道&#xff0c;C标准库中通过string类…
阅读更多...
前端学习（80）：按类型划分标签（inline）

前端学习（80）：按类型划分标签（inline）

解决font-size中间有间隙 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compat…
阅读更多...
将应用程序安装为Windows服务

将应用程序安装为Windows服务

将应用程序安装为Windows服务 安装为服务的好处:不用登陆系统就可以自动启动. 微软官方对该小工具的说明&#xff1a;Installs and uninstalls executable services and assigns names to them. 显而易见&#xff0c;这个小工具是用以安装和卸载可执行的服务和指派服务名给这些…
阅读更多...
HBase shell 命令介绍

HBase shell 命令介绍

HBase shell是HBase的一套命令行工具&#xff0c;类似传统数据中的sql概念&#xff0c;可以使用shell命令来查询HBase中数据的详细情况。安装完HBase之后&#xff0c;如果配置了HBase的环境变量&#xff0c;只要在shell中执行hbase shell就可以进入命令行界面&#xff0c;HBase…
阅读更多...
【C++深度剖析教程13】函数对象的分析

【C++深度剖析教程13】函数对象的分析

今天来学习函数对象。什么是函数对象呢&#xff1f;下面我们以一个例子来引出函数对象的概念。 假设我们需要编写一个函数&#xff0c;实现下面这些功能&#xff1a; -函数可以获得斐波那契数列每一项的值 -每调用一次返回一个值 -函数可根据需要重复用使用 实现上面的几个…
阅读更多...
IE图标消失 HTML文件图标变为未知图标的解决方法

IE图标消失 HTML文件图标变为未知图标的解决方法

有时候保存在硬盘里的HTM和HTML文件图标会突然变为未知的图标&#xff0c;而且它们往往还是与IE关联&#xff0c;也没有发现病毒。原因我怎么也弄不明白&#xff0c;但可以通过对注册表做些修改来恢复&#xff0c;详细步骤如下: 1.首先打开注册表编辑器&#xff0c;定位到HKEY_…
阅读更多...
(SQuirreL SQL Client 客户端 )使用Apache Phoenix 实现 SQL 操作HBase

(SQuirreL SQL Client 客户端 )使用Apache Phoenix 实现 SQL 操作HBase

Apache Phoenix 相信大家并不陌生&#xff0c;它是HBase的SQL驱动&#xff0c;Phoenix 使得Hbase 支持通过JDBC的方式进行访问&#xff0c;并将你的SQL查询转换成Hbase的扫描和相应的动作。 兼容性&#xff1a; Phoenix 2.x - HBase 0.94.x Phoenix 3.x - HBase 0.94.x Phoen…
阅读更多...
【C++深度剖析教程14】经典问题解析三之关于赋值的疑问

【C++深度剖析教程14】经典问题解析三之关于赋值的疑问

今天我们来总结一下&#xff0c;之前所学C中所遇到的一些经典的问题。 第一个疑问是&#xff1a; -什么时候需要重载赋值操作符 -编译器是否提供默认的赋值操作&#xff1f; 解答&#xff1a; *编译器为每个类默认重载了赋值操作符 *默认的赋值操作符仅完成了浅拷贝 *当…
阅读更多...
前端学习（82）：按内容进行分类

前端学习（82）：按内容进行分类

阅读更多...
微服务架构和SOA的区别

微服务架构和SOA的区别

1. 2. 4 微服 务 架构 与 SOA 的 区别 1. 3. 1 微 服务 的 拆分 对于 一般 的 公司 而言&#xff0c; 实践 微 服务 有 非常 大的 技术 挑战&#xff0c; 所以 并不是 所有 的 公司 都 适合 将 单体 架构 拆分 成 微服 务 架构。 一般来说&#xff0c; 微服 务 架构 比较 适合 …
阅读更多...
最新文章

Copyright @ 2022~2023