用tabIndex轻松实现网页导航
时间：2007-02-17 来源：PHP爱好者
用tabIndex轻松实现网页导航->>网页教学网(http://www.webjx.com)建站指南|网页制作|网页特效|Flash动画|网络编程|素材下载|教程下载|建站|HTML|CSS|JAVASCRIPT|ASP|PHP|JSP|ASP.NET|数据库 ★ 设为首页 ★ 收藏本站
★ 繁体中文 首 页 | 业界新闻 | 建站指南 | 网页制作 | 动画制作 | 网页特效 | 网络编程 | 书籍教程 | 网页素材 | 视频教程 | 教学论坛 当前位置： 首 页 >> 网页制作 >> HTML基础知识 >> 内容浏览 [ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据库 ] 用tabIndex轻松实现网页导航 http://www.webjx.com 更新日期：2006-06-15 14:39 网页教学网 最近，当我在一个网站上输入表格数据时，我填写了一栏，并点击[Tab]键移到下一栏；当我抬头时，我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中，但不久[Tab]键又再次出现问题。这一情形使我想了解一下页面设计，以及tabIndex属性如何通过键盘帮助导航。 通过[Tab]键访问元素 HTML DOM tabIndex特性允许你设置或返回一个HTML元素的tab键顺序。IE 4.0最先支持此特性。起初，只有真正可通过[Tab]键访问的元素受到支持，如输入栏、链接等。如今，所有的网络浏览器，以及页面上显示的所有元素都支持此特性。在应用它之前，你可以双击HTML规范保证某个元素支持此特性。 tabIndex特性 应用tabIndex特性是一个简单而又直接的过程。例如，下面的HTML源代码将tabIndex值1赋值给输入栏，它是tab顺序的第一栏： <input id="idfname" name="firstName" tabindex="1" /> 如果最初选择了[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]键访问的项目。 Tony Patton拥有丰富的Java、VB、Lotus及XML方面的知识，是一个专业的应用程序开发人员。
php爱好者站 http://www.phpfans.net 为phper提供一切资讯.
★ 繁体中文 首 页 | 业界新闻 | 建站指南 | 网页制作 | 动画制作 | 网页特效 | 网络编程 | 书籍教程 | 网页素材 | 视频教程 | 教学论坛 当前位置： 首 页 >> 网页制作 >> HTML基础知识 >> 内容浏览 [ HTML ] [ FW ] [ DW ] [ FP ] [ JS ] [ XML ] [ CSS ] [ 图象 ] [ FLASH ] [ .NET ] [ ASP ] [ JSP ] [ PHP ] [ 数据库 ] 用tabIndex轻松实现网页导航 http://www.webjx.com 更新日期：2006-06-15 14:39 网页教学网 最近，当我在一个网站上输入表格数据时，我填写了一栏，并点击[Tab]键移到下一栏；当我抬头时，我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中，但不久[Tab]键又再次出现问题。这一情形使我想了解一下页面设计，以及tabIndex属性如何通过键盘帮助导航。 通过[Tab]键访问元素 HTML DOM tabIndex特性允许你设置或返回一个HTML元素的tab键顺序。IE 4.0最先支持此特性。起初，只有真正可通过[Tab]键访问的元素受到支持，如输入栏、链接等。如今，所有的网络浏览器，以及页面上显示的所有元素都支持此特性。在应用它之前，你可以双击HTML规范保证某个元素支持此特性。 tabIndex特性 应用tabIndex特性是一个简单而又直接的过程。例如，下面的HTML源代码将tabIndex值1赋值给输入栏，它是tab顺序的第一栏： <input id="idfname" name="firstName" tabindex="1" /> 如果最初选择了[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]键访问的项目。 Tony Patton拥有丰富的Java、VB、Lotus及XML方面的知识，是一个专业的应用程序开发人员。
php爱好者站 http://www.phpfans.net 为phper提供一切资讯.
相关阅读 更多 +
