今天写了个登录页面,因为文本框后面都有东西,所以用tab键切换的时候不能直接切换到下一个文本框。
代码如下:
<h1>用户名</h1> <div class="tb_div"> <input type="text" onblur="checkName();" id="username" class="tb" /><span><a href="Regester.aspx">注册新账号</a></span> </div> <h1>密码</h1> <div class="tb_div"> <input type="password" id="pwd" class="tb" /><span><a href="#">忘记密码</a></span> </div> <h1>验证码</h1> <div class="tbSmall"> <input type="text" id="verfication" class="tb_small" /> <a href="#" onclick="ClickImg();return false;" class="ver"> <img src = "verification.ashx" style="border:0px" alt="看不清,换一张" id="verification" /> </a> </div>
在网上查资料之后,发现自己着实是学艺不精,input下面有个tabindex,只要依次给他们一个tabindex值即可,光标便会由小到大切换
改后代码如下:
<h1>用户名</h1> <div class="tb_div"> <input type="text" tabindex='100' onblur="checkName();" id="username" class="tb" /><span><a href="Regester.aspx">注册新账号</a></span> </div> <h1>密码</h1> <div class="tb_div"> <input type="password" tabindex='101' id="pwd" class="tb" /><span><a href="#">忘记密码</a></span> </div> <h1>验证码</h1> <div class="tbSmall"> <input type="text" tabindex='102' id="verfication" class="tb_small" /> <a href="#" onclick="ClickImg();return false;" class="ver"> <img src = "verification.ashx" style="border:0px" alt="看不清,换一张" id="verification" /> </a> </div>