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 相关文章推荐
js对数字的格式化使用说明
Jan 12 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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计算两个日期相差天数的方法
2015/03/14 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python使用filetype精确判断文件类型
2017/07/02 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
会议主持词
2014/03/17 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
简历自我评价优缺点
2015/03/11 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书