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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
js实现文章目录索引导航(table of content)
May 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提交后跳转
2013/06/23 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
js仿360开机效果
2019/12/26 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
简单易懂的python环境安装教程
2017/07/13 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
关于Keras Dense层整理
2020/05/21 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
网络维护中文求职信
2014/01/03 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS