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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
代码生成器 document.write()
Apr 15 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
理解JavaScript事件对象
Jan 25 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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实现的替换敏感字符串类实例
2014/09/22 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
ExtJS 2.0 实用简明教程之布局概述
2009/04/29 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
vue之延时刷新实例
2019/11/14 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
JS实现放烟花效果
2020/03/10 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
Python中的文件和目录操作实现代码
2011/03/13 Python
python调用windows api锁定计算机示例
2014/04/17 Python
Python异常处理操作实例详解
2018/08/28 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
座谈会主持词
2014/03/20 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
文秘自荐信
2014/06/28 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
TS 类型收窄教程示例详解
2022/09/23 Javascript