js 上下左右键控制焦点(示例代码)

如下所示：


代码如下:

//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---------------上下左右键控制

赞 (0)

相关推荐

  • 利用JS来控制键盘的上下左右键(示例代码)

    这是一个JS初级代码,想学JS的朋友,可以研究下或者扩展下,最好能用JS实现整个键盘的控制,那感觉就很有意思了. 具体代码如下: 复制代码 代码如下: <style>tr.highlight{background:#08246B;color:white;}</style><table border="1" width="70%" id="ice"><tr><td><input ty

  • JS实现用键盘控制DIV上下左右+放大缩小与变色

    用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作: 上:↑ 下:↓ 左:← 右:→ Ctrl + 1 : 背景变为绿色 Ctrl + 2 : 背景变为黄色 Ctrl + 3 : 背景变为蓝色 Ctrl + ↑ : 放大 Ctrl + ↓ : 缩小 用键盘控制DIV html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;bord

  • js跑步算法的实现代码

    先复制一下,看看运行的效果吧,其中用到的精髓是setInterval()方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>JavaScript</title><style>html{backgroun

  • js游戏人物上下左右跑步效果代码分享

    js游戏人物上下左右跑步效果代码分享

    本文实例讲述了js游戏人物上下左右跑步效果.分享给大家供大家参考.具体如下: js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效.你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery实现热气球动画背景登录框代码如下 <!DOCTYPE html>

  • js实现键盘上下左右键选择文字并显示在文本框的方法

    本文实例讲述了js实现键盘上下左右键选择文字并显示在文本框的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

  • js键盘上下左右键怎么触发function(实例讲解)

    复制代码 代码如下: <script type="text/javascript"> function jumpPage() {     if (event.keyCode==37)//左 fun_a(); if (event.keyCode==38)//上 fun_b(); if (event.keyCode==39)//右 fun_c(); if (event.keyCode==40)//下 fun_d(); } function fun_a(){ window.ale

  • js 上下左右键控制焦点(示例代码)

    如下所示: 复制代码 代码如下: //begin---------------上下左右键控制 if('${iscontrol_mchntid}'.indexOf('${mchntid}')!=-1){ var texts = new Array();//设置为focus所在的locationvar x = 2;var y = 3;var maxx = 0;var maxy = 0;window.onload=function(){var inputs = $("[location]")

  • Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

    本文总结自实习中对项目的重构.原先项目采用Springboot+freemarker模版,开发过程中觉得前端逻辑写的实在恶心,后端Controller层还必须返回Freemarker模版的ModelAndView,逐渐有了前后端分离的想法,由于之前,没有接触过,主要参考的还是网上的一些博客教程等,初步完成了前后端分离,在此记录以备查阅. 一.前后端分离思想 前端从后端剥离,形成一个前端工程,前端只利用Json来和后端进行交互,后端不返回页面,只返回Json数据.前后端之间完全通过public A

  • vue实现菜单权限控制的示例代码

    vue实现菜单权限控制的示例代码

    大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种--前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这两种方法的优缺点以及如何实现(不熟悉vue-router API的同学可以先去官网看一波API哈). 我先简单说下项目的需求:如下图所示,有一级菜单和二级菜单,然后不同的人登录进去会展示不同的菜单. 前端控制路由的思路:将所有的路由映射表都拿到前端来维护,就是我的router.js里面将所有的菜单p

  • Springboot+Spring Security实现前后端分离登录认证及权限控制的示例代码

    Springboot+Spring Security实现前后端分离登录认证及权限控制的示例代码

    目录 前言 本文主要的功能 一.准备工作 1.统一错误码枚举 2.统一json返回体 3.返回体构造工具 4.pom 5.配置文件 二.数据库表设计 初始化表数据语句 三.Spring Security核心配置:WebSecurityConfig 四.用户登录认证逻辑:UserDetailsService 1.创建自定义UserDetailsService 2.准备service和dao层方法 五.用户密码加密 六.屏蔽Spring Security默认重定向登录页面以实现前后端分离功能 1.实

  • JS实现按钮添加背景音乐示例代码

    1-代码 <html> <head> <meta charset="utf-8"> <title>js实现按键声</title> </head> <body> <ul> <li> <a href="menu-list" rel="external nofollow" rel="external nofollow"

  • js enter键激发事件实例代码

    如下所示: document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { $("#btnSubmit").click(); } } 以上这篇js enter键激发事件实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Android中js和原生交互的示例代码

    本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

  • 使用D3.js创建物流地图的示例代码

    使用D3.js创建物流地图的示例代码

    本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图 制作思路 需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板 加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意

  • 微信小游戏中three.js离屏画布的示例代码

    国庆8天长假,重庆之行因故未成,偶得闲,用three.js结合cannon.js写个3D小游戏耍耍. 在微信小游戏中,把three.js的3D内容在离屏画布处理,然后复制到在屏画布,方法是: let c_toolbarHeight=140; let sysInfo=wx.getSystemInfoSync(); require('./js/libs/weapp-adapter.js'); var canvas_webGL=window.canvas; canvas_webGL.width = s

  • 使用js获取身份证年龄的示例代码

    /** 根据身份证号码判断性别 15位身份证号码:第7.8位为出生年份(两位数),第9.10位为出生月份,第11.12位代表出生日 18位身份证号码:第7.8.9.10位为出生年份(四位数),第11.第12位为出生月份, 第13.14位代表出生日期,第17位代表性别,奇数为男,偶数为女. */ //根据身份证号获取年龄 GetAge(identityCard) { let len = (identityCard + "").length; let strBirthday = "

随机推荐