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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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 简易输出CSV表格文件的方法详解
2013/06/20 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
python实现外卖信息管理系统
2018/01/11 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
介绍一下Linux文件的记录形式
2012/04/18 面试题
网站美工岗位职责
2014/04/02 职场文书
实习生工作证明范本
2014/09/14 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
结婚老公保证书
2015/02/26 职场文书
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js
Hive日期格式转换方法总结
2022/06/25 数据库