最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[Tab]键移到下一栏;当我抬头时,我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中,但不久[Tab]键又再次出现问题。这一情形使我想了解一下页面设计,以及tabIndex属性如何通过键盘帮助导航。
通过[Tab]键访问元素
HTML DOM tabIndex特性允许你设置或返回一个HTML元素的tab键顺序。IE
4.0最先支持此特性。起初,只有真正可通过[Tab]键访问的元素受到支持,如输入栏、链接等。如今,所有的网络浏览器,以及页面上显示的所有元素都支持此特性。在应用它之前,你可以双击HTML规范保证某个元素支持此特性。
tabIndex特性
应用tabIndex特性是一个简单而又直接的过程。例如,下面的HTML源代码将tabIndex值1赋值给输入栏,它是tab顺序的第一栏:
如果最初选择了[Tab]键,带这个输入栏的网页会将光标移动到firstName栏。
在给tabIndex特性赋值时,要留意几个问题。下面是几个赋值规则:带0值tabIndex的元素根据源代码(或默认页面行为)进行排序。
大于0的tabIndex值设定其tab顺序。所有带正tabIndex值的元素出现在所有带0 tabIndex值的元素之前。
如果你犯了一个错误,把同一个tabIndex赋予给多个元素,像其它元素一样,它们会以一个0值tabIndex进行处理。
将tabIndex赋值为-1,则在使用[Tab]键时,此元素被忽略。注意:如果使用-1值时,onfocus与onblur事件仍被启动。
tabIndex的值可为0至32767之间的任意数字。
列表A中的样本HTML代码将一个tabIndex值赋予给页面中的每一个项目。输入栏与DIV标签包含tabIndex特性,允许用户用键盘仔细阅读页面元素。(DIV标签并不提供与获得焦点有关的太多信息,但我想用非输入元素说明tabIndex的应用情况。)值为-1的按钮被赋值,在应用[Tab]键时,它们即被忽略。
当输入元素充满(达到最大长度)时,你可以增加一小段JavaScript脚本来实现自动定位功能。这是一个基本的函数,我们来看看脚本如何实现其功能:
function checkLen(x,y) {
if
(y.length==x.maxLength) {
var next=x.tabIndex
if (next <
document.getElementById("frmTest").length)
{
document.getElementById("frmTest").elements[next-1].focus()
} }
}
该函数接受两个变量。第一个变量为输入栏,第二个变量包含该栏的值。并将栏的长度与栏的可接受最大长度相比较。如果它们相等(即该栏是充满的),则从栏中读取tabIndex的值;如果该值小于最大长度,则焦点被移动下一栏中。
此函数为每一栏的onkeyup事件赋值,因此每次在栏中输入一个值,以检验其是否达到最大长度时,都要调用该函数。如果达到最大值,则光标按tab顺序移动到下一栏中。列表B中的源代码将此函数添加到上面的例子中。
提高访问能力
为元素指定tabIndex可帮助经常使用键盘的用户更为方便地接触网络界面;非标准用户,如PDA、移动电话以及残疾人使用的屏幕阅读器也从中受益。任何扩充应用软件功能的事件都是有益的。
小事一桩 你可能要花许多时间来设计网络窗体,使其具有视觉吸引力,并能被后端服务器组件正确处理。但是,你可能忽略了要用非标准技术或浏览器对其进行测试。典型的例子就是放弃鼠标,而依靠键盘来导航窗体。HTML标准包含tabIndex特性,它允许你控制通过[Tab]键访问的项目。
以上就是html教程:用tabIndex轻松实现网页导航 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。


Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.

ZendStudio 13.5.1 Mac
Puissant environnement de développement intégré PHP

Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
