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和CSS速查手册
Aug 20 Javascript
js变量以及其作用域详解
Jul 18 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
JS实现灯泡开关特效
Mar 30 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
拼音码表的生成
2006/10/09 PHP
smarty的保留变量问题
2008/10/23 PHP
PHP中list方法用法示例
2016/12/01 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
Dojo 学习要点
2010/09/03 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python各种excel写入方式的速度对比
2020/11/10 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
模具毕业生推荐信
2014/02/15 职场文书
总经理的岗位职责
2014/02/23 职场文书
篝火晚会策划方案
2014/05/16 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
求职信格式范文
2015/03/19 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS