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

上篇文章中有提到通过键盘的上下箭头来移动网页中table布局相邻的两个input,但是对于下图中这种情况,上文中的代码就无效了,博主改了下代码,可以实现不相邻的两个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>


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值