日期:2014-05-18  浏览次数:20855 次

在jsp页面如何用键盘的上下左右键控制<html:text>框中的焦点自由的移动?现在做项目遇到这样一个问题谢谢大家给宝贵意见!!!!
在jsp页面如何用键盘的上下左右键控制<html:text>框中的焦点自由的移动

------解决方案--------------------
这是纯HTML代码,在struts中也可以用,你只需为<html:text>标签产生一个ID即可!希望对你有所帮助

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
<TITLE> 方向键事件响应</TITLE>
 </HEAD>
 <script language="javascript">
function init(){
document.getElementById("mytext1").focus();
}
//←的keyCode等于:37
//→的keyCode等于:39
//↑的keyCode等于:38
//↓的keyCode等于:40
function keystoke(obj){
var e = window.event;
var id = document.activeElement.id;
switch(e.keyCode){
case 37:
if(id=="mytext2"){
document.getElementById("mytext1").focus();
}else if(id=="mytext4"){
document.getElementById("mytext3").focus();
}else if(id=="mytext6"){
document.getElementById("mytext5").focus();
}
break;
case 38:
if(id=="mytext3"){
document.getElementById("mytext1").focus();
}else if(id=="mytext4"){
document.getElementById("mytext2").focus();
}else if(id=="mytext5"){
document.getElementById("mytext3").focus();
}else if(id=="mytext6"){
document.getElementById("mytext4").focus();
}
break;
case 39:
if(id=="mytext1"){
document.getElementById("mytext2").focus();
}else if(id=="mytext3"){
document.getElementById("mytext4").focus();
}else if(id=="mytext5"){
document.getElementById("mytext6").focus();
}
break;
case 40:
if(id=="mytext1"){
document.getElementById("mytext3").focus();
}else if(id=="mytext2"){
document.getElementById("mytext4").focus();
}else if(id=="mytext3"){
document.getElementById("mytext5").focus();
}else if(id=="mytext4"){
document.getElementById("mytext6").focus();
}
break;

}
}


 </script>

 <BODY onload="init()" onkeyup="keystoke()">
<table border="1" bordercolor="red">
<tr>
<td><input id="mytext1" type="text" value="" /></td>
<td><input id="mytext2" type="text" value="" /></td>
</tr>
<tr>
<td><input id="mytext3" type="text" value="" /></td>
<td><input id="mytext4" type="text" value="" /></td>
</tr>
<tr>
<td><input id="mytext5" type="text" value="" /></td>
<td><input id="mytext6" type="text" value="" /></td>
</tr>
</table>
 </BODY>
</HTML>