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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 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语法速查表
2007/01/02 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP实现的策略模式示例
2019/03/20 PHP
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
js实现根据身份证号自动生成出生日期
2015/12/15 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 连连看连接算法
2008/11/22 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
python生成随机红包的实例写法
2019/09/02 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
C++是不是类型安全的
2014/02/18 面试题
cf战队收人口号
2014/06/21 职场文书
不错的求职信范文
2014/07/20 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
诚信考试主题班会
2015/08/17 职场文书
导游词之西安骊山
2019/12/03 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js