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 相关文章推荐
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
javascript html5实现表单验证
Mar 01 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
JS实现贪吃蛇游戏
Nov 15 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
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python with语句和过程抽取思想
2019/12/23 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
Python修改列表值问题解决方案
2020/03/06 Python
python实现逻辑回归的示例
2020/10/09 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
会计电算化个人自我评价
2013/11/17 职场文书
旅游管理专业生自荐信范文
2014/01/02 职场文书
个人优缺点自我评价
2014/01/27 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
机关节能减排实施方案
2014/03/17 职场文书
财务担保书范文
2014/04/02 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
婚前保证书
2014/04/29 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
2014年领班工作总结
2014/11/25 职场文书
办公室主任个人总结
2015/02/28 职场文书
工作失职检讨书范文
2015/05/05 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
八年级英语教学反思
2016/02/15 职场文书