光标自动从一个表格跳入另一个表格

于 2012-12-12 17:09:12 发布
阅读量323 收藏
点赞数
分类专栏： javaScript 文章标签： JavaScript html ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaodeng_java/article/details/84367248
版权
本文介绍了一种通过JavaScript实现的输入字段联动功能，利用DOM事件和ID映射优化了页面布局，使得用户在输入特定字符时能够自动跳转到下一个预设的输入框，提升了用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">

document.οnkeyup=fun;

function fun(){
var now=document.activeElement;
if(now.value.length==2){
next(now.id);
}
}
//跳转到下一个输入框
function next(nowId){
var nums = new Array("a","b","c","d","e");
if(nowId.substring(1,2)=="7"){
var nowRow=0;
for(var i=0;i<nums.length;i++){
if(nums[i]==nowId.substring(0,1)){
nowRow=i;
break;
}
}
document.getElementById(nums[nowRow+1]+"1").focus();
}else{
var nextId=nowId.substring(0,1)+""+(parseInt(nowId.substring(1,2))+1);
document.getElementById(nextId).focus();
}
}
</script>

<body>
<form>
<table width="100%" border="0" cellpadding="3" cellspacing="1" class="bg_xt">
<tr>
<td colspan="7" align="center" bgcolor="#FFE1F9" class="font_01">红 号</td>
<td align="center" bgcolor="#E1F0FF" class="font_02">蓝号</td>
</tr>
<tr>
<td align="center" bgcolor="#FFE1F9" class="font_02">A</td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a1" maxlength="2" class="bk_frm3"/></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a2" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a3" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a4" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a5" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="a1" id="a6" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#E1F0FF"><input type="text" name="a1" id="a7" maxlength="2" class="bk_frm3" /></td>
</tr>
<tr>
<td align="center" bgcolor="#FFE1F9" class="font_02">B</td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b1" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b2" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b3" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b4" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b5" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="b1" id="b6" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#E1F0FF"><input type="text" name="b1" id="b7" maxlength="2" class="bk_frm3" /></td>
</tr>
<tr>
<td align="center" bgcolor="#FFE1F9" class="font_02">C</td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c1" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c2" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c3" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c4" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c5" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="c1" id="c6" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#E1F0FF"><input type="text" name="c1" id="c7" maxlength="2" class="bk_frm3" /></td>
</tr>
<tr>
<td align="center" bgcolor="#FFE1F9" class="font_02">D</td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d1" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d2" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d3" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d4" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d5" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="d1" id="d6" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#E1F0FF"><input type="text" name="d1" id="d7" maxlength="2" class="bk_frm3" /></td>
</tr>
<tr>
<td align="center" bgcolor="#FFE1F9" class="font_02">E</td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e1" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e2" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e3" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e4" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e5" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#FFE1F9"><input type="text" name="e1" id="e6" maxlength="2" class="bk_frm3" /></td>
<td align="center" bgcolor="#E1F0FF"><input type="text" name="e1" id="e7" maxlength="2" class="bk_frm3" /></td>
</tr>
</table>
</form>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值