您的位置：首页 > Web前端 > JavaScript

js控制光标上下移动

2016-06-30 09:35 363 查看

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script language="javascript">
var cols=3;
var obj;
var key;
function setobj(input){
obj=input;
}


function init(){
document.onkeydown=keyDown;
document.onkeyup=keyUp;
}

//按键
function keyDown(DnEvents){

key=window.event.keyCode;

//f5键
if(key==116){
//取消按键
window.event.keyCode=0;
return false;
}

//backplace
if(key==8){
//触发事件的控件既不是 <input />,该语句值在IE里有效
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 < 2*cols -1){
document.forms[0].elements[i + 1].focus();
key = 0;
}
}

//下键
if (key == 40){//↓
if(i< cols){
document.forms[0].elements[cols + i].focus();
}
}
}
}



}



function keyUp(UpEvents){
return false;

}

</script>

</head>



<body bgcolor="#FFFFFF" text="#000000" onload="init()">

<form>

<table border="0" cellspacing="0" cellpadding="0" align="center">

<tr>

<td>

<input type="text" name="textfield" 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="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>

</table>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript web

相关文章推荐

新的分享

章节导航