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.οnkeydοwn=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" οnmοuseup=getMouse(1,1) ></td>
<td><input id="td12" οnmοuseup=getMouse(1,2)></td>
<td><input id="td13" οnmοuseup=getMouse(1,3)></td>
<td><input id="td14" οnmοuseup=getMouse(1,4)></td>
</tr>
<tr>
<td><input id="td21" οnmοuseup=getMouse(2,1)></td>
<td><input id="td22" οnmοuseup=getMouse(2,2)></td>
<td><input id="td23" οnmοuseup=getMouse(2,3)></td>
<td><input id="td24" οnmοuseup=getMouse(2,4)></td>
</tr>
<tr>
<td><input id="td31" οnmοuseup=getMouse(3,1)></td>
<td><input id="td32" οnmοuseup=getMouse(3,2)></td>
<td><input id="td33" οnmοuseup=getMouse(3,3)></td>
<td><input id="td34" οnmοuseup=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.οnkeydοwn=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>
转载于:https://www.cnblogs.com/camilla/p/7592929.html
JS控制文本框内键盘上下左右键的焦点相关推荐
- JS 控制文本框只能输入中文、英文、数字与指定特殊符号（屏蔽表情输入）
onkeyup:释放键盘事件 onpaste:粘贴事件 oncontextmenu :鼠标右击事件 控制这三种事件的输入 οnkeyup="this.value=this.value.rep ...
- js控制文本框仅仅能输入中文、英文、数字与指定特殊符号
JS 控制文本框仅仅能输入数字 <input οnkeyup="value=value.replace(/[^0-9]/g,'')"οnpaste="value=v ...
- html input光标位置,js控制input框内光标位置（setSelectionRange详解）
问题描述 前段时间碰到一个需求:在表单中有一个字段叫金额,用户希望点击该输入框后(focus),能够自动为其金额数字后加上"万元"两个字. 虽然这个需求可以通过其他的设计方式规避( ...
- JS控制文本框只读状态（普通、EasyUI的textbox）
一.普通文本框 用原生获取DOM元素的方法去获取可以进行改变,但是改用 $('#test') 这种反而不起作用. <body><a>测试:</a><input ...
- js控制文本框中的字符数
function checkLength(which,remainderNum,maxChars) {if (which.value.length > maxChars)which.value ...
- js符号输入不可用_js控制文本框禁止输入特殊字符详解
在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 this.value=this.value.repl ...
- html文本框自动赋值,js给文本框赋值 value与innerHTML
赋值操作: document.getElementById("testId").value="hello"; value与innerHTML的区别 上面的val ...
- C# e.Handled的用法，控制文本框键盘输入
e.Handled:获取或设置一个值,该值指示是否处理过此事件. e.Handled:多用在过滤某些事件,比如键盘按键 ①如要求文本框只能输入数字,那么当输入的是字母,则e.handled=true即 ...
- js实现焦点进入文本框内关闭输入法:imeMode
js实现焦点进入文本框内关闭输入法:imeMode 2011-05-26 11:23 要用到的东西: imeMode:xxx 有四个参数 active 代表输入法为中文 inactive 代表输入法为 ...
- layui table 可编辑单元格 JS实现通过键盘上下左右键 光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键 光标焦点移动到旁边的编辑行/列 类似效果 上下左右键实现的代码 layui.config({base: '/static/layuia ...
最新文章
- android 图标点击变大,使android桌面图标变大
- 用池来提升对象的复用
- Waymo冰火两重天：无人出租车最快今秋推出，高管团队嫌隙严重
- Struts2中通过Ajax传递json数据
- 系统维护好帮手—Starter
- JDE 系统表（标准表）
- 知道焊缝长度如何确定节点板尺寸_钢结构节点板（钢结构节点板尺寸如何选取）...
- landset8各波段_landsat8卫星全面
- MaskRCNN识别Pascal VOC 2007
- 十二黄金圣斗士-合辑-修复版-3D打印图纸
- 实验十二 HTTP 协议分析实验
- 一个电脑白痴和一个黑客的超爆笑的对话
- web前端html实例-Html5实现的语音搜索功能
- 学生身份你可以干什么？
- FIFO原理及其应用
- PoW，PoS 和PoA浅析
- ABBYY FineReader PDF15下载安装教程
- OMNET的安装说明
- 基于声网的音视频SDK和FreeSWITCH开发WebRTC2SIP Gateway 方案和思路
- NQI国家质量基础设施“一站式”公共服务平台开发建设
热门文章
- 支持mysql 批量查询_mysql批量查询
- C++ std::set insert 怎么得到 返回值 是什么
- kubernetes Serverless、CaaS、FaaS是什么
- kubernetes视频教程笔记 （6）-kubernetes集群安装
- JavaSE基础———Set接口中的常用类HashSet、LinkedHashSet和TreeSet
- linux系统ntp服务监听端口,Linux系统 NTP服务器配置详解
- java ssh2连接_通过JCraft的jsch包基于SSH2协议实现连接linux服务器提供终端操作的java工具实现类SftpUtil...
- javscript DOM基础知识（常用篇）
- Eureka Server 开启身份验证与客户端注册
- 小D课堂 - 零基础入门SpringBoot2.X到实战_汇总