JS控制文本框内键盘上下左右键的焦点

最新推荐文章于 2023-11-28 11:13:55 发布
最新推荐文章于 2023-11-28 11:13:55 发布
阅读量7.9k 收藏 13
点赞数
分类专栏： JavaScript 文章标签： up down left right
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jingzizhu/article/details/38926239
版权

JavaScript键盘上下左右控制文本框焦点的方法有很多，这里简单说两种方法：

方法一：

创建一个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方法获取当前鼠标位置，然后游当前位置确认数组的下一个相应文本框，将其选中。这里以简单粗糙的方式呈现基本思路

<!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>



iseisen
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript回车切换焦点
amyson的专栏
06-09 3384
回车键按下时，自动以Tab键方式在文本输入框之间进行焦点切换的JavaScript代码：  if(event&&event.srcElement){ srcEle=event.srcElement; if((event.keyCode||event.charCode)==13 && srcEle.tagName.toUpperCase(
javascript自动切换焦点控制效果完整实例
10-22
主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
js 上下左右键控制焦点(示例代码)
10-26
主要是对js上下左右键控制焦点的示例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
行内编辑表格，enter键聚焦切换至下个框（类似tab键）
m0_56994856的博客
11-28 139
【代码】行内编辑表格，enter键聚焦切换至下个框（类似tab键）
element-ui表单input输入框获取自动聚焦功能
weixin_44548001的博客
09-07 4581
我是使用vue开发前端页面的，所以在methods中定义一个方法，在方法中写input输入框自动聚焦的功能。当用户点击新增按钮时，弹出新增页面，需要form表单中的input框自动获取焦点。第三步：在mounted中调用定义的方法，在页面结构渲染之后调用这个方法。第一步：给form表单的input输入框添加ref属性。第二步：定义一个方法。
js案例:按下按键聚焦到输入框
m0_63400611的博客
12-12 2205
分析 核心思路:检测是否按下了s键,如果按下则把光标定位到搜索框里面 使用键盘事件对象里面的keyCode判断用户是否按下s键 搜索框获得焦点,使用js里面的focus()方法 代码 <body> <input type="text"> <script> var search = document.querySelector('input'); document.addEventListener('keyup', function(e)
Js实现类似Excel工作表用方向键切换输入框焦点
xyr05288的专栏
05-29 925
Js实现类似Excel工作表用方向键切换输入框焦点                 var inputs=document.getElementById("mm").getElementsByTagName("INPUT");  fu
通过JS 给这个input加一个事件 获得焦点，回车事件绑定
03-27 1112
通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById("strName"); oInput.focus(); } JS监听某个输入框 //回车事件绑定 $('#strName').bind('keyup', fun...
Qt 键盘上下左右改变控件焦点 （就像桌面上下左右选择一样）
热门推荐
嬴政的专栏
05-20 1万+
先设置好控件的objectname.
jquery keypress,keyup,onpropertychange键盘事件
10-29
项目所需，在试图用js实现这样的功能：文本框失去焦点时，判断输入字符串的长度，以验证是否超出范围，超出范围则自动截取。
JS实现方向键切换输入框焦点的方法
11-28
本文实例讲述了JS实现方向键切换输入框焦点的方法。分享给大家供大家参考。具体如下： 这里实现js方向键控制切换输入框焦点效果，不过无法兼容Firefox。当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内，无需点击鼠标，对于经常录入数据的时候，这种功能可提高输入速度。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
上下左右键控制table中光标(兼容多浏览器)
01-25
js绑定input框实现上下左右键和Enter键控制table中光标的移动，光标移至最后一个input框处，按enter键新增一行。（多浏览器可用）
jquery 按键盘上的enter事件
01-19
接下来我们使用Jquery实现回车键Enter切换焦点，此代码在常用浏览器IE7， IE8， Firefox 3， Chrome 2 和 Safari 4测试通过。使用的开发工具是微软VS2010+Jquery框架 实现步骤如下 1、首先引用Jquery类库 [removed]...
KeyMomentum:适用于 Chrome 的纯键盘网页浏览实用程序
06-22
KeyMomentum 会在浏览器窗口的右下角放置一个文本框，该文本框会在页面加载完成后自动捕获焦点（如有必要，可以使用快捷键Alt + Shift + K重新获得对 KeyMomentum 文本框的焦点）。 只需开始在文本框中键入内容，...
Js中的onblur和onfocus事件应用介绍
01-19
html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。 一. onfocus（获得焦点...
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
最新发布
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
单选框选中，js控制文本框非必填
05-25
可以使用JavaScript来实现选中单选框时，将文本框设为非必填。可以添加一个事件监听器来监控单选框的选中状态，然后根据选中状态来更改文本框的required属性。 以下是一个示例代码： HTML代码： ``` <label> <input type="radio" name="required" value="yes"> 必填 </label> <label> <input type="radio" name="required" value="no"> 非必填 </label> <input type="text" id="myInput" required> ``` JavaScript代码： ``` const radioButtons = document.getElementsByName("required"); const myInput = document.getElementById("myInput"); // 添加事件监听器 for (let i = 0; i < radioButtons.length; i++) { radioButtons[i].addEventListener("change", function() { if (this.value === "no") { myInput.removeAttribute("required"); } else { myInput.setAttribute("required", ""); } }); } ``` 这段代码首先获取了所有name属性为"required"的单选框，并获取了id为"myInput"的文本框。然后循环遍历所有单选框，添加了一个change事件监听器。当单选框的选中状态发生变化时，如果选中的是"非必填"，则移除文本框的required属性，否则添加required属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值