js 上下左右键控制焦点(示例代码)


Posted in Javascript onDecember 14, 2013

如下所示:

//begin---------------上下左右键控制
if('${iscontrol_mchntid}'.indexOf('${mchntid}')!=-1){
var texts = new Array();
//设置为focus所在的location
var x = 2;
var y = 3;
var maxx = 0;
var maxy = 0;
window.onload=function(){
var inputs = $("[location]");
for(var i = 0; i < inputs.length; i++){
texts.push(inputs[i]);
}
for(var i = 0; i < texts.length; i++){
texts[i].onfocus = new Function("setCurrent('" + texts[i].getAttribute("location") + "')");
var crtx = parseInt(texts[i].getAttribute("location").split(",")[0]);
var crty = parseInt(texts[i].getAttribute("location").split(",")[1]);
maxx = maxx < crtx ? crtx : maxx;
maxy = maxy < crty ? crty : maxy;
texts[i].onkeydown = function(e){
e = e || window.event;
switch(e.keyCode){
case 38:setPosition(x,y,38);break;// 上
case 40:setPosition(x,y,40);break;// 下
case 37:setPosition(x,y,37);break;// 左
case 39:setPosition(x,y,39);break;// 右
case 45:setPosition(x,y,45);break; // Insert键/返回键 在输入框里是删除且输入库有值时是删除 其他为返回上一页
default:return true;
}
}; 
}
};
function setPosition(x,y,keyCode){
//此处加入动态改变位置的逻辑----begin 
//上下时,只改动y坐标,x坐标自动改变
//左右时,只改动x坐标,y坐标自动改变
if(keyCode == '38' && x == '3'){
if(y=='3'||y=='4'||y=='5'||y=='6'||y=='7'||y=='8'){
y='3';
}
}
if(keyCode == '40' && x == '4'){
if(y=='3'||y=='4'||y=='5'||y=='6'||y=='7'||y=='8'){
y='3';
}
}
//此处加入动态改变位置的逻辑----end
if(keyCode == '38'){
x = --x; 
}
if(keyCode == '40'){
x = ++x; 
}
if(keyCode == '37'){
y = --y; 
}
if(keyCode == '39'){
y = ++y; 
}
movePosition(x,y,keyCode);
}
function movePosition(x1,y1,keyCode){
if(keyCode == '45'){
//光标所在的对象是input时
var st = x1+","+y1;
if($("input[location='"+st+"']").attr("type")=="text"){
var oldval = $("input[location='"+st+"']").val();
var newval = oldval.substring(0,oldval.length-1);
$("input[location='"+st+"']").val(newval);
return false;
}else{
history.go(-1); 
return false;
}
}
x1 = x1 > maxx ? 1 : x1;
y1 = y1 > maxy ? 1 : y1;
x1 = x1 < 1 ? maxx : x1;
y1 = y1 < 1 ? maxy : y1;
var j = 0;
for(; j < texts.length; j++){
if(texts[j].getAttribute("location") == x1 + "," + y1){ 
texts[j].focus();
break;
}
} 
if(j == texts.length){
switch(keyCode){
case 38:movePosition(--x1,y1,keyCode);break;// 上
case 40:movePosition(++x1,y1,keyCode);break;// 下
case 37:movePosition(x1,--y1,keyCode);break;// 左
case 39:movePosition(x1,++y1,keyCode);break;// 右
}
}
} 
function setCurrent(location){
x = location.split(",")[0];
y = location.split(",")[1];
}
}
//end---------------上下左右键控制
Javascript 相关文章推荐
JavaScript 动态创建VML的方法
Oct 14 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
javascript如何写热点图
Dec 08 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 #Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 #Javascript
代码触发js事件(click、change)示例应用
Dec 13 #Javascript
jquery获得option的值和对option进行操作
Dec 13 #Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 #Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 #Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 #Javascript
You might like
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
php桥接模式应用案例分析
2019/10/23 PHP
JS控制表格隔行变色
2006/06/26 Javascript
农历与西历对照
2006/09/06 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
python flask 多对多表查询功能
2017/06/25 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Sony C++笔试题
2013/03/10 面试题
经典c++面试题六
2012/01/18 面试题
大二自我鉴定范文
2013/10/05 职场文书
军训的自我鉴定
2013/12/10 职场文书
建筑安全生产责任书
2014/07/22 职场文书