网页页面设计方案 TabIndex元素

TabIndex便是按Tab键有次序的获得界定过的TabIndex元素设定在各个元素之间的聚焦点。

  做过表单或填写过表单的人都会发现,应用Tab键能够逐1得到每一个input的聚焦点。这个东东实际上也是能够改动的,例如不想被获得,或更改被获得的次序。

  在填写表单的情况下(申请注册登陆或其它),有许多客户全是堵塞过电脑鼠标,而立即按Tab键跳到下1个文字框的,直到全部的东东都填好,随后是递交,这是1个十分好和便捷的作用。我本人的习惯性是,在填写完全部的物品时,递交1般全是用电脑鼠标去点一下递交按钮的,并且不期待Tab会使聚焦点跳到button上面,但我非常少发现有应用Tab不容易跳到button上的,不知道道是否本人习惯性太BT了-_-!!!

  假如不想某个东东被获得聚焦点,能够tabindex=-x,让tabindex的值为负,这样的话Tab就会立即绕过。

下面用1个简易的表单做例:

提醒:您能够先改动一部分编码再运作


拷贝编码
编码以下:

<form method="post" action="#">
<p><label for="t1">The first pressing Tab to set focus to textbox </label><input type="text" id="t1" tabindex="1" /></p>
<p><label for="t2">The Second pressing Tab to set focus to textbox </label><input type="text" id="t2" tabindex="2" /></p>
<p><label for="t3">The Third pressing Tab to set focus to textbox </label><input type="text" id="t3" tabindex="3" /></p>
<p>Press Tab, Not focusing to textbox <input type="submit" id="t4" tabindex="⑴" value="SendInfo" /></p>
</form>

  应用Tab键,获得聚焦点的次序便是根据tabindex的值尺寸来排列的。上面的事例先后得到聚焦点的是t1, t2, t3, 到t4的情况下,因为TabIndex的值为⑴,因此t4不容易得到聚焦点,而是立即跳到下1个获得聚焦点的元素上。
  t1, t2, t3, t4的TabIndex值能够依据具体要求随意变更,Tab聚焦点依据值由小到大被得到。
TabIndex便是用来做这些滴。。。