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 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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
收音机指标测试方法及仪器
2021/03/01 无线电
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
css图片自适应大小
2007/11/28 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python实现将xml导入至excel
2015/11/20 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
对公司的意见和建议
2015/06/04 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL