JS 鍵盤操作
<head>
<title>My JSP 'test.jsp' starting page</title>
<script type="text/javascript">
function keyDown(){
var iekey=event.keyCode;
var realkey=String.fromCharCode(event.keyCode);
//按"Insert"鍵表格獲取光標事件
var grid=document.getElementById("myGrid");
var order=event.target||event.srcElement; //得到當前的文本框
if(order.tagName=="INPUT"){
var curRow = order.parentNode.parentNode.rowIndex;//行索引
var curCol = order.parentNode.cellIndex;//列索引
var rowCount=grid.childNodes[0].childNodes.length-1;
var colCount=grid.childNodes[0].childNodes[0].childNodes.length-1;
if(iekey==38){
if(--curRow>=0&&grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].tagName=="INPUT"){
grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].select();//選中上一行的文本框.
}
}else if(iekey==40 || iekey == 13){
if(++curRow<=rowCount&&grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].tagName=="INPUT"){
grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].select();//選中下一行的文本框.
}
}else if(iekey==39){
if(++curCol<=colCount&&grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].tagName=="INPUT"){
grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].select();//選中下列的文本框.
}
}else if(iekey==37){
if(--curCol>=0&&grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].tagName=="INPUT"){
grid.childNodes[0].childNodes[curRow].childNodes[curCol].childNodes[0].select();//選中前列的文本框.
}
}
}
}
document.onkeydown = keyDown;
</script>
</head>
<body style="font-size:12px;text-align: center; padding: 8px;" >
<form action="#" method="post">
<TABLE id="myGrid">
<tr >
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
</tr>
<tr >
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
</tr>
<tr >
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
</tr>
<tr >
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
</tr>
<tr >
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
</tr>
<tr >
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<tr >
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
<td ><input type="text"/></td>
</tr>
</TABLE>
</form>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章