当输入元素布满(达到最大长度)时,你可以增加一小段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 />
评论加载中…
![]() |