JavaScript按住Enter键实现移到下一个焦点

最新推荐文章于 2025-09-17 14:21:57 发布
原创 最新推荐文章于 2025-09-17 14:21:57 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用JavaScript实现用户按住Enter键时自动切换页面上的输入框焦点，提供了具体的代码示例，帮助开发者增强网页交互体验。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;list-style: none;}
		.box{float:left;margin-right:3px;position: relative;}
		.xialaBox{position:absolute;z-index:5;width:171px;height:300px;border:1px solid red;background:green;display: none;}
		.selectBox2{display: inline-block;position: relative;}
		.selectBox2 select{
			position: absolute;
			top:-15px;
			/*width:173px;*/
		}

	</style>
</head>
<body>
	<form action="" method="get">
		<table>
			<thead>
				<tr>
					<th>header</th>
					<th>header</th>
					<th>header</th>
					<th>header</th>
					<th>header</th>
					<th>header</th>
					<th>header</th>
	
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<div class="box">
							<input type="text" class="pullDownText bar" name="">
							<div class="xialaBox"></div>
						</div>
					</td>
					<td>
						<div class="box">
							<input type="text" class=" bar" name="">
							<!-- <div class="xialaBox"></div> -->
						</div>
					</td>
					<td>
						<div class="box">
							<input type="text" placeholder="readonly" name="" readonly>
							<!-- <div class="xialaBox"></div> -->
						</div>
					</td>
					<td>
						<div class="box">
							<input type="text" placeholder="readonly" name="" readonly>
							<!-- <div class="xialaBox"></div> -->
						</div>
					</td>
					<td>
						<div class="box">
							<input type="text" class="pullDownText bar" name="">
							<div class="xialaBox"></div>
						</div>
					</td>
					<td>
						<div class="box">
							<input type="text" class="pullDownText" name="">
							<div class="xialaBox"></div>
						</div>
					</td>
					<td>
						<div class="box">
							<input type="text" placeholder="disabled" name="" disabled>
							<!-- <div class="xialaBox"></div> -->
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="box">
							<input type="text" class="pullDownText d1" name="">
							<div class="xialaBox"></div>
						</div>
					</td>
					<td>
						<div class="box">
							<div class="selectBox2">
								<select name="audi2">
								  <option value="volvo">Volvo</option>
								  <option value="saab">Saab</option>
								  <option value="opel">Opel</option>
								  <option value="audi">Audi</option>
								</select>

							</div>
						</div>
					</td>
					<td>
						<div class="box">
							<input type="text" class="pullDownText d" name="">
							<div class="xialaBox"></div>
						</div>
					</td>

				</tr>

			</tbody>
		</table>
	</form>
	<script>
		var inputs = document.querySelectorAll("input[type='text'], select");
		var xialaBox = document.querySelectorAll('.xialaBox');
		var inputsArr2 = [];
		var count = -1;
		var inputsArr = [].slice.apply(inputs);
		var flag = false;//是否是Enter触发
		

		for(var i = inputsArr.length - 1; i >= 0; i--){

			if(inputsArr[i].readOnly || inputsArr[i].disabled){
				inputsArr.splice(i, 1);
			}
		}
		// console.log(inputsArr);	

		for(var i = 0; i < inputsArr.length; i++){
			inputsArr2.push(inputsArr[i]);
		}
		for(var i = inputsArr2.length - 1; i >= 0; i--){
			if(inputsArr2[i].tagName == "SELECT"){
				inputsArr2.splice(i, 1);
			}
		}
		

		for(var i = 0; i < inputsArr2.length; i++){
			inputsArr2[i].index = i;
			inputsArr2[i].onclick = function(e){
				e.stopPropagation();
				for(var j = 0; j < xialaBox.length; j++){
					if(j != this.index){
						xialaBox[j].style = "none";
					}
				}
				if(flag == false)
				{
					count = this.index;
					count2 = this.index;
					console.log("countClick:" + count);
					console.log("countClick2:" + count);
				}
				if(inputsArr2[this.index].nextElementSibling != null){
					inputsArr2[this.index].nextElementSibling.style.display = "block";
				}
				

			}
		}
		window.document.onkeydown = function(keyEvent){
			var keyEvent = keyEvent ? keyEvent : window.event;
			var keyCode = keyEvent.which ? keyEvent.which : keyEvent.keyCode;

			if(keyCode == 13){
				flag = true;
				count ++;
				if(count >= inputsArr.length){
					count = inputsArr.length-1;
				}
				inputsArr[count].focus();

				if(inputsArr[count].tagName == "SELECT"){
					for(var i = 0; i < xialaBox.length; i++){
						xialaBox[i].style.display = "none";
					}
				}
				else{
					flag = false;
					inputsArr[count].click();
				}

				return false;
			}
		}

		

		

		document.onclick = function(){
			// alert(123);
			for(var i = 0; i < xialaBox.length; i++){
				xialaBox[i].style.display = "none";
			}
		}


	</script>
</body>
</html>

效果如下：

JavaScript实现enter发送消息(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 744
JavaScript实现enter发送消息(附完整源码)
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 2058
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
JavaScript 表单：用回车键使焦点移到下一个元素中
aij9817的博客
01-19 573
前段时间学习了 HTML 和 CSS，对这方面产生了兴趣，也开始学习了 javascript 高级编程(第三版)，这些天也一直在学，刚刚学到事件和表单脚本的内容。前几天，师傅让编写一段代码：是在 javascript 表单中，用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中。应用目前为止学到的知识试着编写代码，在编写的过程中遇到了几个难点：取模计算；在函数内部用...
JavaScript 回车 焦点切换
10-29
回车键按下时，自动以Tab键方式在文本输入框之间进行焦点切换的JavaScript代码
JS在Edge中点击回车焦点移动到下一个控件，获取画面中的所有可编辑的项目，排除属性「readonly,disabled,hidden」的控件。
ningyingjun的专栏
04-21 472
Edge中点击回车焦点移动到下一个控件，代码。 //Edge対応 document.onkeydown = function enterToTab(event) { //获取画面中的所有能入力的input和submit按钮。 var inputs = document.querySelectorAll("input[type='text']:not(:disabled):not([readonly]):not([type=hidden]),input[type='submit']");
js按回车实现tab效果（下一个控件获取焦点）
MrLee的博客
07-13 1732
方式一： 判断 event.keyCode==13 回车行为，下一个控件聚焦。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" conte
42、鼠标和键盘交互编程指南
最新发布
white的博客
09-17 15
本文详细介绍了在Flash Player中实现鼠标和键盘交互的编程方法，涵盖鼠标滚轮事件监听、键盘按键捕获与状态管理、keyCode与charCode的区别、修饰键使用、输入法编辑器（IME）交互机制，以及焦点获取、设置与制表顺序控制。通过多个代码示例和流程图，帮助开发者深入理解用户输入事件的处理逻辑，并提供在游戏、表单、多媒体应用中的实际应用场景与开发建议，提升交互体验与程序可用性。
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 4547
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
javaScript入门基础知识点
m0_63262511的博客
12-21 1350
声明了变量，但是没有赋值2.2.1、特殊情况：0：如果前面的数字是由0x开头的转换为16进制，由0开头转换为8进制，正常数字转为10进制，非数字转为NaN1：如果为1，则不管前面是不是数字都转换为NaN​​​// 12​// 12​// NaN​// NaN​//NaN​//NaN​//NaN​//NaN​//NaN//0//0为真时// 3// 10为假时// 0// 0。
DOM事件机制、事件流（事件冒泡、事件捕获）、事件委托、事件对象、事件类型（JavaScript）
qq_51066068的博客
04-18 1112
目录 事件机制 事件是由三部分组成 执行事件的步骤 常用事件： 1.事件流 1.1.事件冒泡(IE事件流) 阻止事件冒泡 event.stopPropagation() 1.2.事件捕获(Netscape事件流) 1.3.DOM事件流 2.事件处理程序 2.1.HTML 事件处理程序 2.2.DOM0 事件处理程序 2.3.DOM2 事件处理程序 addEventListener() removeEventListener() 3.事件对象 3.1...
javascript 中自动转移焦点
cansee网络收藏夹
11-01 1184
在body中加入onkeydown事件调用函数如下：   function KeyDown()   {        if(window.event.keyCode==13&&window.event.srcElement.type=="text")        {             event.keyCode=9;        }   }
js获取inpu焦点，自动跳第二个
尹小姐的博客
05-03 996
js获取inpu焦点，输入完1位数字后自动跳到第二个光标 html代码块 &lt;div class="mui-row" id="inputs"&gt; &lt;input class="mui-numbox-input" type="number" onKeyUp="if(this.value.length&gt;1){this.value=this.value.sub
js按回车键聚焦下一个控件。
qq_38719039的博客
09-12 1962
方式一： 判断 event.keyCode==13 回车行为，下一个控件聚焦。 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&
js捕获键盘按键值，并且实现焦点切换
Kanglizi的专栏
08-16 2795
content #nav{ font-size: 30px; } #nav_tab{ position: absolute; left: 50%; margin-left: -240px; margin-top: 40px; height: 50px; width: 480px; line-height: 20px; text
使用js做焦点滚动图
qq_43143992的博客
11-06 557
代码如下： &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; .focus{ width:300px; position:relative; } .
Javascript回车跟换焦点
东明之羞的博客
08-13 712
 1.回车方法 function keyDown(docs,callback) { docs.onkeydown = function(e) { if (!e) e = window.event; //火狐中是 window.event if ((e.keyCode || e.which) == 13) { ...
js代码执行enter操作
wxy270的博客
05-23 894
先创建一个keyboard事件，在用input元素派发。在input标签里，用代码执行enter操作。
使用JavaScript在文本框中的Enter键上触发按钮单击
asdfgh0077的博客
12-10 2524
我有一个文本输入和一个按钮（见下文）。 当在文本框中按下Enter键时，如何使用JavaScript 触发按钮的click事件 ？ 当前页面上已经有一个不同的“提交”按钮，因此我不能简单地
JavaScript实现回车键切换输入框焦点
weixin_30755393的博客
03-12 485
用JavaScript实现回车键切换输入框焦点的功能，不是回车换行哦，在Textarea中，回车换行是默认功能，不过若要在textarea中使用 回车切换输入框焦点功能的话，回车换行就要失效了，不过input对象可以用，一般在表单中，input元素是比较多的，下面来个例子： <script type="text/javascript"> function handleEnter...
用JavaScript模拟Excel：实现焦点移动与单元格编辑
4. 键盘操作的焦点移动：如输入完成后按Enter键可将焦点移动到下方单元格，按Tab键可移动到右侧单元格。 知识点四：与Excel相似的界面效果实现 实现与Excel相似的界面效果，需要考虑以下几点： 1. 网格布局：使用...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值