jquery 方向键控制光标在不规则分布的input 中移动
2016-04-26 14:09:49 来源: 阅读:
用方向键控制光标在表格中移动输入还是比较方便的，网上也有很多例子，比如用tabindex的：
var baseIndex = 100; $("#tab1") .find("tr").each(function(r) { $(this).find("td").each(function(c) { $(this).find("input") .attr("tabindex", r * 100 + c + baseIndex) .addClass("cGridInput"); }); }); /////////////////////////////////////////////////////////////////////// $("#tab1 .cGridInput").live("keydown", function(evt) { var tabIndex = parseInt($(this).attr("tabindex")); switch (evt.which) { case 38: //上 tabIndex -= 100; break; case 40: //下 tabIndex += 100; break; case 37: //左 tabIndex = tabIndex - 1; break; case 39: //右 tabIndex = tabIndex + 1; break; default: return; } if (tabIndex > 0) { $(".cGridInput[tabindex=" + tabIndex + "]").focus(); return false; } return true; });
但是上面的方法有个问题，就是input的分布必须是连续性的，中间不能间隔。也就是一个挨一个，像下面这种情况就不行了
为了能在这种不规则分布的输入框中自由移动光标，就重新改写了一下代码。
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;
}
<table id="tab1" border="1" cellpadding="5" cellspacing="0" width="300px">
<tr>
<td><input style=" width:50px" /></td>
<td>2</td>
<td>3</td>
<td><input style=" width:50px" /></td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td><input style=" width:50px" /></td>
<td>3</td>
<td>s</td>
<td><input style=" width:50px" /></td>
</tr>
<tr>
<td><input style=" width:50px" /></td>
<td>2</td>
<td><input style=" width:50px" /></td>
<td><input style=" width:50px" /></td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><input style=" width:50px" /></td>
<td>5</td>
</tr>
<tr>
<td><input style=" width:50px" /></td>
<td>2</td>
<td>3</td>
<td><input style=" width:50px" /></td>
<td>5</td>
</tr>
</table>