您的位置：首页 > 其它

键盘事件

2015-09-08 15:36 169 查看

今天拿到一个需求，需要实现在table中上下左右获取文本框，如exl

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0px; padding:0px; font-size:20px;}
td{width:200px;height:25px;}
.tdNone{border:none;width:100px; }
input{width:200px;height:25px;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
//alert("window!");
var id;
var jqID;
$("input").keydown(function(event){
id=$(this).attr("id");
jqID=id.split("");
if(event.which || event.keyCode){
if((event.which==37)||(event.keyCode == 37)){//左键37
//alert(id+"---"+jqID[0]+"---"+jqID[1]);
$("#"+jqID[0]+(jqID[1]-1)).focus();//左边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
}
if((event.which==38)||(event.keyCode == 38)){//上键38
//alert(id+"---"+jqID[0]+"---"+jqID[1]);
$("#"+(jqID[0]-1)+jqID[1]).focus();//上边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
}
if((event.which==39)||(event.keyCode == 39)){//右键39
//alert(id+"---"+jqID[0]+"---"+(jqID[1]+1));
$("#"+jqID[0]+(Number(jqID[1])+1)).focus();//上边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
}
if((event.which==40)||(event.keyCode == 40)){//下键40
//alert(id+"---"+(jqID[0]+1)+"---"+jqID[1]);
$("#"+(Number(jqID[0])+1)+jqID[1]).focus();//上边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
}
}
});
})

</script>
</head>

<body>
<table border="1" cellpadding="5" cellspacing="50">
<tr>
<td class="tdNone"></td>
<td>名称1</td>
<td>名称2</td>
<td>名称3</td>
<td>名称4</td>
</tr>
<tr>
<td class="tdNone">模特1</td>
<td><input id="11"/></td>
<td><input id="12" /></td>
<td><input id="13"/></td>
<td><input id="14"/></td>
</tr>
<tr>
<td class="tdNone">模特2</td>
<td><input id="21"/></td>
<td><input id="22"/></td>
<td><input id="23"/></td>
<td><input id="24"/></td>
</tr>
<tr>
<td class="tdNone">模特2</td>
<td><input id="31"/></td>
<td><input id="32"/></td>
<td><input id="33"/></td>
<td><input id="34"/></td>
</tr>
<tr>
<td class="tdNone">模特2</td>
<td><input id="41"/></td>
<td><input id="42"/></td>
<td><input id="43"/></td>
<td><input id="44"/></td>
</tr>
</table>
</body>

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

标签：

相关文章推荐

新的分享

章节导航