js控制html上下左右键选择td问题，代码如下，左键和上键之前，但是下键和右键总是跑到最下面货最后面
<html><head><title>设计家园http://www.dwww.cn</title><metahttp-equiv="Content-Type"conten...
<html>
<head>
<title>设计家园 http://www.dwww.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
var cols=4;
var obj;
var CanMove=false;
var key;
function setobj(input){
obj=input;
}
function init(){
document.onkeydown=keyDown;
document.onkeyup=keyUp;
}
function keyDown(DnEvents){
var key=window.event.keyCode;
if(key==116){
window.event.keyCode=0;
return false;
}
if(key==8){
if(event.srcElement.tagName!="INPUT"){
event.cancelBubble = true;
event.returnValue = false;
return false;
}
}
for(var i=0;i<document.forms[0].elements.length;i++){
if(document.forms[0].elements[i]==obj){
if (key == 37){//←
if(i>0){
document.forms[0].elements[i-1].focus();
}
}
if (key == 38){//↑
if(i>cols-1){
document.forms[0].elements[i-cols].focus();
}
}
if (key == 39){//→
if(i<document.forms[0].elements.length-1){
document.forms[0].elements[i+1].focus();
}
}
if (key == 13)
{//→
event.keyCode = 9;
}
if (key == 40){//↓
if(i<document.forms[0].elements.length-cols){
document.forms[0].elements[i+cols].focus();
}
}
}
}
}
function keyUp(UpEvents){
return false;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="init()">
<form action=http://dwww.cn>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<input type="text" name="textfield0" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield1" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield2" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield3" onfocus="setobj(this)">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield4" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield5" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield6" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield7" onfocus="setobj(this)">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield8" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield9" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield10" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield11" onfocus="setobj(this)">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield12" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield613" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield14" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield15" onfocus="setobj(this)">
</td>
</tr>
</table>
</form>
</body>
</html> 展开
<head>
<title>设计家园 http://www.dwww.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
var cols=4;
var obj;
var CanMove=false;
var key;
function setobj(input){
obj=input;
}
function init(){
document.onkeydown=keyDown;
document.onkeyup=keyUp;
}
function keyDown(DnEvents){
var key=window.event.keyCode;
if(key==116){
window.event.keyCode=0;
return false;
}
if(key==8){
if(event.srcElement.tagName!="INPUT"){
event.cancelBubble = true;
event.returnValue = false;
return false;
}
}
for(var i=0;i<document.forms[0].elements.length;i++){
if(document.forms[0].elements[i]==obj){
if (key == 37){//←
if(i>0){
document.forms[0].elements[i-1].focus();
}
}
if (key == 38){//↑
if(i>cols-1){
document.forms[0].elements[i-cols].focus();
}
}
if (key == 39){//→
if(i<document.forms[0].elements.length-1){
document.forms[0].elements[i+1].focus();
}
}
if (key == 13)
{//→
event.keyCode = 9;
}
if (key == 40){//↓
if(i<document.forms[0].elements.length-cols){
document.forms[0].elements[i+cols].focus();
}
}
}
}
}
function keyUp(UpEvents){
return false;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onload="init()">
<form action=http://dwww.cn>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<input type="text" name="textfield0" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield1" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield2" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield3" onfocus="setobj(this)">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield4" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield5" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield6" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield7" onfocus="setobj(this)">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield8" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield9" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield10" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield11" onfocus="setobj(this)">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield12" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield613" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield14" onfocus="setobj(this)">
</td>
<td>
<input type="text" name="textfield15" onfocus="setobj(this)">
</td>
</tr>
</table>
</form>
</body>
</html> 展开
1个回答
展开全部
你这个写的好复杂，给你个思路，你要做的是16个input4x4矩阵分布，那么利用2维数组，input的id（你的代码里有name，但是加上id更便于控制）设置为id="t[row][col]"，然后代码就简单了，onkeypress的时候，先判断出是上下左右哪个按键，如果是上，则row-1，col不变，如果是左，则row不变col-1。下和右与上、左对应。计算出目标的row、col之后，只要document.getElementById("t"+row+col).focus()就可以了。当然，你要自行盘断下row和col的取值范围，保证不会超界
更多追问追答
追问
可以给个具体实例么？
可以给个具体实例么？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
