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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
自己的js工具 Event封装
Aug 21 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
javascript白色简洁计算器
May 04 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 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 取得瑞年与平年的天数的代码
2009/08/10 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
laravel学习教程之存取器
2016/07/30 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
儿童学习python的一些小技巧
2018/05/27 Python
基于python实现查询ip地址来源
2020/06/02 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
劳动之星获奖感言
2014/02/01 职场文书
给老婆的道歉信
2015/01/20 职场文书
病危通知书样本
2015/04/17 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
公司董事任命书
2015/09/21 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python