2007-10-02

用tabIndex轻松实现网页导航

来源: 本站收集整理 作者:佚名 评论 0 条
 
</div>
<hr size="3" />
<div id="addressSection" tabindex=10 style="background:lightblue; padding: 15px;">
Home: <input id="idhome" name="homenumber" tabindex="11" /><br />
Work: <input id="idwork" name="worknumber" tabindex="12" /><br />
Mobile: <input id="idlcell" name="cellnumber" tabindex="13" /><br />
</div>
<hr size="3" />
<div id="buttonsSection" tabindex=14 style="background:green; padding: 15px;">
<input type="button" name="sButton" tabindex="-1" id="idSButton" value="Submit" />
<input type="button" name="cButton" tabindex="-1" id="idCButton" value="Cancel" />
</div></form></body></html>

当输入元素布满(达到最大长度)时,你可以增加一小段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中的源代码将此函数添加到上面的例子中。

列表B

<html><head>
<title>tabIndex Example 2</title>
<script type="text/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();
} } }
</script></head>
<body>
<form name="frmTest">
<hr size="3" />
<div id="nameSection" tabIndex="1" style="background:silver; padding: 15px;">
First: <input id="idfname" size="50" name="firstName" tabIndex="2" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
Middle: <input id="idmname" size="50" name="middleName" tabIndex="3" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
Last: <input id="idlname" size="50" name="lastName" tabIndex="4" maxlength="50" onkeyup="checkLen(this,this.value)" /><br />
共3页: 上一页 [1] 2 [3] 下一页
(本文仅表明作者个人观点,不代表本站及其管理员立场.) 推荐 收藏 投稿 打印 返回 关闭
上一篇:构建自己的HTML工具  
下一篇:网络开发工具包实用工具介绍
    评论加载中…
 推荐文章
     

网站首页  -  网站地图 -   站长论坛  -  网站投稿  -    -  网站管理
Copyright © 2008 芜湖站长站 All Rights Reserved 皖ICP备07500611号