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

最新推荐文章于 2024-09-26 11:01:02 发布

ACGuan

最新推荐文章于 2024-09-26 11:01:02 发布

阅读量1k

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/100015876

版权

Web前端专栏收录该内容

85 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码示例如下：

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

效果如下：