root/collected/trunk/html-test-cases/getting-tabindex.html

Revision 39, 4.9 kB (checked in by simon, 3 years ago)

Added a div and an input with tabindex="-1".

  • Property svn:eol-style set to native
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2"http://www.w3.org/TR/html4/strict.dtd">
3
4<html>
5
6<head>
7<title>Getting the tabindex value of an element with JavaScript</title>
8<script type="text/javascript">
9function Logger(){
10        this._rows = "";
11}
12Logger.prototype.log = function(desc, mechanism, value){
13        value = (value === null) ? "null" : value;
14        this._rows += "<tr><td>" + desc + "<\/td><td>"
15                + mechanism + "<\/td><td>" + value + "<\/td><\/tr>\n";
16};
17Logger.prototype.getHTML = function(){
18        return "<table><thead>"
19                + "<tr><th>Element<\/th><th>Mechanism<\/th><th>Value<\/th><\/tr>"
20                + "<\/thead><tbody>\n"
21                + this._rows
22                + "<\/tbody><\/table>\n";
23};
24Logger.prototype.logGetAttribute = function(id, desc, attr, iFlags){
25        var elem = document.getElementById(id);
26        if(arguments.length == 4){
27                this.log(desc, 'elem.getAttribute("' + attr + '", ' + iFlags + ")",
28                        elem.getAttribute(attr, iFlags));
29        }else{
30                this.log(desc, 'elem.getAttribute("' + attr + '")',
31                        elem.getAttribute(attr));
32        }
33};
34Logger.prototype.logTabindexProperty = function(id, desc){
35        var elem = document.getElementById(id);
36        this.log(desc, "elem.tabindex", elem.tabindex);
37};
38Logger.prototype.logTabIndexProperty = function(id, desc){
39        var elem = document.getElementById(id);
40        this.log(desc, "elem.tabIndex", elem.tabIndex);
41};
42Logger.prototype.logAttributes = function(id, desc, attr){
43        var node = document.getElementById(id).attributes[attr];
44        if(node){
45                this.log(desc, 'elem.attributes["' + attr + '"].nodeValue',
46                        node.nodeValue);
47                this.log(desc, 'elem.attributes["' + attr + '"].specified',
48                        node.specified);
49        }else{
50                this.log(desc, 'elem.attributes["' + attr + '"]', node);
51        }
52};
53Logger.prototype.logGetAttributeNode = function(id, desc, attr){
54        var node = document.getElementById(id).getAttributeNode(attr);
55        if(node){
56                this.log(desc, 'elem.getAttributeNode("' + attr + '").nodeValue',
57                        node.nodeValue);
58                this.log(desc, 'elem.getAttributeNode("' + attr + '").specified',
59                        node.specified);
60        }else{
61                this.log(desc, 'elem.getAttributeNode("' + attr + '")', node);
62        }
63};
64Logger.prototype.logTabindex = function(id, desc){
65        this.logGetAttribute(id, desc, "tabindex");
66        if(isIE()){
67                this.logGetAttribute(id, desc, "tabindex", 0);
68                this.logGetAttribute(id, desc, "tabindex", 1);
69                this.logGetAttribute(id, desc, "tabindex", 2);
70        }
71        this.logGetAttribute(id, desc, "tabIndex");
72        if(isIE()){
73                this.logGetAttribute(id, desc, "tabIndex", 0);
74                this.logGetAttribute(id, desc, "tabIndex", 1);
75                this.logGetAttribute(id, desc, "tabIndex", 2);
76        }
77        this.logTabindexProperty(id, desc);
78        this.logTabIndexProperty(id, desc);
79        this.logAttributes(id, desc, "tabindex");
80        this.logAttributes(id, desc, "tabIndex");
81        this.logGetAttributeNode(id, desc, "tabindex");
82        this.logGetAttributeNode(id, desc, "tabIndex");
83};
84function isIE(){
85        return navigator.userAgent.indexOf("MSIE") != -1;
86}
87function showTableSource(){
88        document.getElementById("source").style.display = "block";
89}
90function removeTabindex(id){
91        var elem = document.getElementById(id);
92        if(isIE){
93                elem.removeAttribute("tabIndex");
94        }else{
95                elem.removeAttribute("tabindex");
96        }
97}
98function run(){
99        var userAgentTextNode = document.createTextNode(navigator.userAgent);
100        document.getElementById("userAgent").appendChild(userAgentTextNode);
101        removeTabindex("div-tabindex-removed");
102        removeTabindex("input-tabindex-removed");
103        logger = new Logger();
104        logger.logTabindex("div-no-tabindex", "div with no tabindex");
105        logger.logTabindex("div-tabindex-1", 'div with tabindex="1"');
106        logger.logTabindex("div-tabindex-minus-1", 'div with tabindex="-1"');
107        logger.logTabindex("div-tabindex-removed", "div with tabindex removed");
108        logger.logTabindex("input-no-tabindex", "input with no tabindex");
109        logger.logTabindex("input-tabindex-1", 'input with tabindex="1"');
110        logger.logTabindex("input-tabindex-minus-1", 'input with tabindex="-1"');
111        logger.logTabindex("input-tabindex-removed", "input with tabindex removed");
112        document.getElementById("log").innerHTML = logger.getHTML();
113        var sourceTextNode = document.createTextNode(logger.getHTML());
114        document.getElementById("source").appendChild(sourceTextNode);
115}
116</script>
117</head>
118
119<body onload="run()">
120<h2>User agent</h2>
121<div id="userAgent"></div>
122<h2>Results</h2>
123<div id="log"></div>
124<hr>
125<div><button onclick="showTableSource()">Show table source</button></div>
126<pre id="source" style="display:none"></pre>
127<hr>
128<div id="div-no-tabindex">div with no tabindex</div>
129<div id="div-tabindex-1" tabindex="1">div with tabindex="1"</div>
130<div id="div-tabindex-minus-1" tabindex="-1">div with tabindex="-1"</div>
131<div id="div-tabindex-removed" tabindex="1">div with tabindex removed</div>
132<div>
133<input id="input-no-tabindex" value="input with no tabindex">
134<input id="input-tabindex-1" tabindex="1" value='input with tabindex="1"'>
135<input id="input-tabindex-minus-1" tabindex="-1" value='input with tabindex="-1"'>
136<input id="input-tabindex-removed" tabindex="1" value="input with tabindex removed">
137</div>
138</body>
139
140</html>
Note: See TracBrowser for help on using the browser.