tabIndex属性

http://www.cnblogs.com/rubylouvre/archive/2009/12/07/1618182.html


围绕表单的可访问性与交互性上,各浏览器都下了很大工夫,比如fieldset与legend等用于增强区域感的元素,for,accessKey,defaultValue,maxlength,tabIndex等用于交互或提示的属性。不过,今天只讲tabIndex。

tabIndex 的用处很简单,就是利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序。虽然微不足道,但细节处见真功夫,这是任何一个WEB应用应当具备的亲用力,保证用户在没有鼠标的情况下(如WAP)仍然可以正常使用。

下面的例子,为了突现tabIndex控制焦点跳转的能力,特意把顺序打乱了。请先选中第一个文本域,然后按tab键观察。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
< html dir = "ltr" lang = "zh-CN" >
   < head >
     < meta charset = "utf-8" />
     < 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" >< br />
       < input tabindex = "3" value = "第三个" type = "text" >< br />
       < input tabindex = "5" value = "第五个" type = "text" >< br />
       < input tabindex = "6" value = "第六个" type = "text" >< br />
       < input tabindex = "4" value = "第四个" type = "text" >< br />
       < input tabindex = "2" value = "第二个" type = "text" >
     </ form >
   </ body >
</ html >


你可能感兴趣的:(index)