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系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
javascript实现日期格式转换
Dec 16 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
vue实现条件叠加搜索的解决方法
May 28 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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
vue实现前端分页完整代码
2020/06/17 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python实现kmp算法的实例代码
2019/04/03 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
村党支部书记承诺书
2014/05/29 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers