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 Firefox与IE 替换节点的方法
Feb 24 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
浅谈Node Inspector 代理实现
Oct 19 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue实现选中效果
Oct 07 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
出纳员岗位责任制
2014/02/11 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL