JS控制文本框内键盘上下左右键的焦点
avaScript键盘上下左右控制文本框焦点的方法有很多，这里简单说两种方法：
方法一：
创建一个table的dom元素，包含5行4列的文本框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>keyboard control 1</title>
<style>
tr.highlight{background:#08246B;color:white;}
</style>
</head>
<body>
<table border="1" width="70%" id="ice">
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
</table>
<script language="javascript">
<!--
//定义初始化行列
var currentLine=0; // 目前的行号
var currentCol=0;
var objtab=document.all.ice;
var colums = objtab.rows[4].cells.length;
var objrow=objtab.rows[0].getElementsByTagName("INPUT");
objrow[0].select();
document.body.onkeydown=function(e){
e=window.event||e;
switch(e.keyCode){
case 37: //左键
currentCol--;
changeItem(e);
break;
case 38: //向上键
currentLine--;
changeItem(e);
break;
case 39: //右键
currentCol++;
changeItem(e);
break;
case 40: //向下键
currentLine++;
changeItem(e);
break;
default:
break;
}
}
//方向键调用
function changeItem(e){
if(document.all){//如果是IE
var it=document.getElementById("ice").children[0]; //获取table表单元素
}else{//其他浏览器
var it=document.getElementById("ice");
}
if(e.keyCode==37||e.keyCode==39){
if(currentLine<0){//如果行小于0
currentLine=it.rows.length-1;
}
if(currentLine==it.rows.length){
currentLine=0;
}
var objtab=document.all.ice;
var objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");
if(currentCol<0){
if(e.keyCode==37){
currentLine--;
if(currentLine<0){//如果行小于0
currentLine=it.rows.length-1;
}
objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");
}
currentCol=objrow.length-1;
}
if(currentCol>=objrow.length){
if(e.keyCode==39){
currentLine++;
if(currentLine==it.rows.length){
currentLine=0;
}
objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");
}
currentCol=0;
}
}else{
if(currentLine<0){//如果行小于0
currentLine=it.rows.length-1;
currentCol--;
if(currentCol<0){
currentCol=colums-1;
}
}
if(currentLine==it.rows.length){
currentLine=0;
currentCol++;
if(currentCol>=colums){
currentCol=0;
}
}
var objtab=document.all.ice;
var objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");
while(e.keyCode==40&&objrow[currentCol]==undefined){
currentLine++;
objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");
}
while(e.keyCode==38&&objrow[currentCol]==undefined){
currentLine--;
objrow=objtab.rows[currentLine].getElementsByTagName("INPUT");
}
}
objrow[currentCol].select();
}
//-->
</script>
</body>
</html>
基本思路是获取表单的行列数，监听键盘操作，通过DOM操作表格的行列来选取表格内的文本框。
方法二：
这个方法试用于动态创建多个文本框的情况，将所有的文本框划分为行列数组，为每个input设置id值，监听键盘操作设置，设置onmouseup方法获取当前鼠标位置，然后游当前位置确认数组的下一个相应文本框，将其选中。这里以简单粗糙的方式呈现基本思路
[html] view plain copy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>keyborad control 2</title>
<style>
tr.highlight{background:#08246B;color:white;}
</style>
</head>
<body>
<table border="1" width="70%" id="ice">
<tr>
<td><input id="td11" onmouseup=getMouse(1,1) ></td>
<td><input id="td12" onmouseup=getMouse(1,2)></td>
<td><input id="td13" onmouseup=getMouse(1,3)></td>
<td><input id="td14" onmouseup=getMouse(1,4)></td>
</tr>
<tr>
<td><input id="td21" onmouseup=getMouse(2,1)></td>
<td><input id="td22" onmouseup=getMouse(2,2)></td>
<td><input id="td23" onmouseup=getMouse(2,3)></td>
<td><input id="td24" onmouseup=getMouse(2,4)></td>
</tr>
<tr>
<td><input id="td31" onmouseup=getMouse(3,1)></td>
<td><input id="td32" onmouseup=getMouse(3,2)></td>
<td><input id="td33" onmouseup=getMouse(3,3)></td>
<td><input id="td34" onmouseup=getMouse(3,4)></td>
</tr>
</table>
<script language="javascript">
<!--
var mouseInfo={}; //存放鼠标的当前位置
var moveArray=new Array(); //存放文本框数组
for(var i=1;i<4;i++){
moveArray[i]=new Array();
for(var j=1;j<5;j++){
moveArray[i][j]="td"+i+j;
}
}
document.body.onkeydown=function(e){ //监听鼠标操作
e=window.event||e;
switch(e.keyCode){
case 37: //左键
moveLeft();
break;
case 38: //向上键
moveUp();
break;
case 39: //右键
moveRight();
break;
case 40: //向下键
moveDown();
break;
default:
break;
}
}
function getMouse(l,k){//鼠标所在位置
mouseInfo["row"]=l;
mouseInfo["col"]=k;
}
function moveLeft(){
var row=mouseInfo["row"];
var col=mouseInfo["col"];
var key=moveArray[row][col-1];
if(document.getElementById(key)!=undefined)
{
var textFiled=document.getElementById(key);
textFiled.focus(false, 1000);
textFiled.select();
mouseInfo["col"]=col-1;
}
}
function moveRight(){
var row=mouseInfo["row"];
var col=mouseInfo["col"];
var key=moveArray[row][col+1];
if(document.getElementById(key)!=undefined)
{
var textFiled=document.getElementById(key);
textFiled.focus(false, 1000);
textFiled.select();
mouseInfo["col"]=col+1;
}
}
function moveUp(){
var row=mouseInfo["row"];
var col=mouseInfo["col"];
var key=moveArray[row-1][col];
if(document.getElementById(key)!=undefined)
{
var textFiled=document.getElementById(key);
textFiled.focus(false, 1000);
textFiled.select();
mouseInfo["row"]=row-1;
}
}
function moveDown(){
var row=mouseInfo["row"];
var col=mouseInfo["col"];
var key=moveArray[row+1][col];
if(document.getElementById(key)!=undefined)
{
var textFiled=document.getElementById(key);
textFiled.focus(false, 1000);
textFiled.select();
mouseInfo["row"]=row+1;
}
}
//-->
</script>
</body>
</html>
JS控制文本框内键盘上下左右键的焦点的更多相关文章
- JS控制文本框禁止输入特殊字符
JS 控制不能输入特殊字符<input type="text" class="domain" onkeyup="this.value=this. ...
- js控制文本框只能输入中文、英文、数字与指定特殊符号.
先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...
- JS 控制文本框只能输入中文、英文、数字与指定特殊符号
想做姓名输入的js判断是否是中文,但是网上找的很多是源于一篇文章的,判断中文的正则式不对,后来找到一个可以准确判断了,但是是监测里面有中文的就行,跟我想要的只能输入中文的意思相左,所以又找了下面的 J ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
- js控制文本框仅仅能输入中文、英文、数字与指定特殊符号
JS 控制文本框仅仅能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=v ...
- JS 控制文本框禁止输入例子
JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.v ...
- JS控制文本框输入的内容
总而言之: 先在‘<input>’ 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g, ...
- js 控制文本框输入要求
把输入框中 输入的字符串含有中文逗号 改成 英文逗号 举例: <input type="text" id="keywords" style="w ...
- JS控制文本框textarea输入字数限制
<html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...
随机推荐
- luogu P3238 [HNOI2014]道路堵塞
传送门 这什么题啊,乱搞就算了,不知道SPFA已经死了吗 不对那个时候好像还没死 暴力就是删掉边后跑Dijkstra SPFA 然后稍微分析一下,可以发现题目中要求的不经过最短路某条边的路径,一定是先 ...
- Centos6.8 下解决服务器被挖矿当肉鸡的方法
刚上班发现有些服务跑不起来,进入服务器查看原因: 第一部分: 一,#top 因为是刚被我kill 掉一次,kill 掉等会还会自启动,之前yam 进程占cpu 是200% 二,# vim /etc/r ...
- Flask表单(form)的应用
导入模块request模块 #指定请求方式,使用methods属性 @app.route("/",methods=['GET','POST']) def index(): #判断c ...
- TensorFlow架构学习
0 - TensorFlow 基于数据流图,节点表示某种抽象计算,边表示节点之间联系的张量. Tensorflow结构灵活,能够支持各种网络模型,有良好的通用性和扩展性. 1 - 系统概述 Tenso ...
- Pickup Objective Actor
在角色的头文件中,添加一个布尔变量,设为共有状态,用来判断是否携带目标物体,并暴露给蓝图,类型为仅蓝图可读 UPROPERTY(BlueprintReadOnly,Category="Gam ...
- 发布逸出 java this 逸出【转】
转自:http://blog.csdn.net/joker_zhou/article/details/7322801 (1)发布:发布是指将一个对象,使其引用储存到一个其他代码可以访问到的地方,在一个 ...
- Hibernate的学习（二）
---恢复内容开始--- 一.多表的建表原则 1.一对多的关系:例如 一个客户有多个联系人: 表与表一对多的关系:在一对多时,多的表中添加一个外键,用来和一的表的主键.产生联系. 2.多对多的关系:例 ...
- JAVA并行异步编程,线程池+FutureTask
java 在JDK1.5中引入一个新的并发包java.util.concurrent 该包专门为java处理并发而书写. 在java中熟悉的使用多线程的方式为两种?继续Thread类,实现Runnal ...
- 论文笔记：Joint Embeddings of Shapes and Images via CNN Image Purification
今天分享的这篇论文是 SIGGRAPH 2015 的入选论文,标题比较长,但它做的事情其实很简单:通过一张图片,找到和这张图片最相似的 3D 形状
- Shell-cat url-list.txt | xargs wget -c
假如你有一个文件包含了很多你希望下载的 URL,你能够使用 xargs下载所有链接: cat url-list.txt | xargs wget -c