bootstrapTable嵌套input,实现上下左右和tab键切换

封装组件js-----keyDown.js

$(function(){
	var table = {
	    size: $("#size").val()
	};

	var inputnum = 0; 
	// 键盘事件 
	document.onkeydown = function(event){
		// 兼容 Mozilla Firefox 
		if (null == event) { 
			event = window.event; 
		} 
		else if ((event.keyCode <= 40 && event.keyCode >= 37) || event.keyCode == 9) { 
			keyinput(event); 
		} 
	} 
	// 实现切换功能主要代码 
	function keyinput(event){
		var target = event.target;
		var len = Number(table.size);
		if(target.localName == 'select'){
			event.preventDefault();
		}
		var inputnum = Number($(target).attr("data-val"));
		var key = event.keyCode;
		// 左 
		if (key == 37) { 
			--inputnum; 
		} 
		// 右 
		else if (key == 39) { 
			++inputnum; 
		} 
		// 上 
		else if (key == 38) { 
			inputnum = inputnum - len; 
		} 
		// 下 
		else if (key == 40) { 
			inputnum = inputnum + len;
		} 
		// Tab
		else if(key == 9){
			++inputnum;
		}
		getPoint(inputnum);
	}
	function getPoint(inputnum){
		setTimeout(function(){
			if($("[data-val='"+inputnum+"']").length > 0){
				document.getElementById($("[data-val='"+inputnum+"']").attr("id")).focus();
				$("[data-val='"+inputnum+"']").focus();
				//document.getElementById($("[data-val='"+inputnum+"']").attr("id")).setSelectionRange($("[data-val='"+inputnum+"']").val().length, $("[data-val='"+inputnum+"']").val().length);
				document.getElementById($("[data-val='"+inputnum+"']").attr("id")).select();
			}
		},0);
	}
})	

示例代码:




    
    


    

你可能感兴趣的:(javascript,开发语言,ecmascript)