您的位置:首页 > 其它

通过键盘上下箭头来移动网页中相邻的两个input(升级版)

2015-09-12 18:48 453 查看
上篇文章中有提到通过键盘的上下箭头来移动网页中table布局相邻的两个input,但是对于下图中这种情况,上文中的代码就无效了,博主改了下代码,可以实现不相邻的两个input间的移动。



<span style="background-color: rgb(255, 255, 255);">$(function (){
var tabArray = new Array(); //这是个二维数组
var maxr = 0; var maxc = 0;
$("#tab1").find("tr").each(function(r) {
$(this).find("td").each(function(c) {
//alert(r + "-" + c);
//r 是行号,c是列号
//这个td中存在input
if ($(this).find("input").length != 0) {
var itemArray = new Array();
itemArray[0] = r;
itemArray[1] = c;
tabArray.push(itemArray);
}
$(this).find("input").attr("class", "YX-" + r + "-" + c); //获得最大列数
if (c > maxc) {
maxc = c;
}
});
//获得最大行数
if (r > maxr) {
maxr = r;
}
});
 
//////////////////////////////////////////////////////////////////////
$("#tab1 input").live("keydown", function(evt) {
var _css = $(this).attr("class");
var nCss = "";
var direction;
//记录按键方向
switch (evt.which) {
case 38: //上
direction = "up";
break;
case 40: //下
direction = "down";
break;
case 37: //左
direction = "left";
break;
case 39: //右
direction = "right";
break;
default:
return;
}
nCss = ReturnNextCss(_css, direction);
if (nCss != "") {
$(".YX-" + nCss).focus();
return false;
}
return true;
});
 
//判断二维数组中是否存在某个项目
function inArray(r, c) {
//遍历数组看存不存在
var flag = 0;
$.each(tabArray, function(i, n) {
if (r == n[0] && c == n[1]) {
flag = 1;
}
});
if (flag == 1)
return true;
else
return false;
}
 
//根据传入的css和方向来遍历数组以确定下一个输入框的按钮
function ReturnNextCss(nowCss, direction) {
var rCss = "";
var r = parseInt(nowCss.split('-')[1]);
var c = parseInt(nowCss.split('-')[2]);
//如果是向上按
if (direction == "up") {
r = r - 1;
while (r >= 0) {
if (inArray(r, c)) {
rCss = r + "-" + c;
break;
}
r = r - 1;
}
}
///////////////////////////////////////////
//如果是向下按
if (direction == "down") {
r = r + 1;
while (r <= maxr) {
if (inArray(r, c)) {
rCss = r + "-" + c;
break;
}
r = r + 1;
}
}
///////////////////////////////////////////
//如果是向左按
if (direction == "left") {
c = c - 1;
while (c >= 0) {
if (inArray(r, c)) {
rCss = r + "-" + c;
break;
}
c = c - 1;
}
}
/////////////////////////////////////////////////
//如果是向右按
if (direction == "right") {
c = c + 1;
while (c <= maxc) {
if (inArray(r, c)) {
rCss = r + "-" + c;
break;
}
c = c + 1;
}
}
return rCss;
}
});</span>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: