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游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 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结合ACCESS的跨库查询功能
2015/06/12 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JavaScript中的闭包
2016/02/24 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
XML文档面试题
2015/08/05 面试题
精彩的推荐信范文
2013/11/26 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
校园之星获奖感言
2014/01/29 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
要账委托书范本
2014/09/15 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
z-index不起作用
2021/03/31 HTML / CSS
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript