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 函数中的参数使用分析
Mar 27 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
python中pycurl库的用法实例
2014/09/30 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python pip配置国内源的方法
2020/02/14 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
研究生毕业鉴定
2014/01/29 职场文书
2015年酒店工作总结
2015/04/28 职场文书
工作犯错保证书
2015/05/11 职场文书
68句权威创业名言
2019/08/26 职场文书