原生js实现输入框焦点切换

最新推荐文章于 2025-03-21 11:55:42 发布

笑道三千

最新推荐文章于 2025-03-21 11:55:42 发布

阅读量1.8k

点赞数 4

分类专栏： # 前端小案例

本文链接：https://blog.csdn.net/weixin_42349568/article/details/109559251

版权

前端小案例专栏收录该内容

49 篇文章

订阅专栏

本文提供了一个使用HTML、CSS和JavaScript实现的输入框自动聚焦到下一个输入框的示例。通过简单的布局设置和事件监听，当用户在一个输入框中输入内容后，焦点会自动转移到下一个输入框。

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

实现的效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.oul{
				width: 200px;
				height: 200px;
				margin: 100px auto;
				border: 1px solid #000000;
				position: relative;
			}
			.box{
				width: 150px;
				height: 150px;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				/* background-color: red; */
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		   .ali{
			   display: inline-block;
			   width: 20px;
			   height: 20px;
			   text-align: center;
		   }
		</style>
	</head>
	<body>
		<div class="oul">
			<div class="box">
				<input type="text" maxlength="1" class="ali" autofocus="autofocus"/>
				<input type="text" maxlength="1" class="ali" onclick="this.blur()"/>
				<input type="text" maxlength="1" class="ali" onclick="this.blur()"/>
				<input type="text" maxlength="1" class="ali" onclick="this.blur()"/>
			</div>
		</div>
		<script type="text/javascript">
			var Oul=document.getElementsByClassName('box')[0]
			Oul.oninput=function(e){
				var e=window.event||e
				var tar=e.target || e.srcElement   
				if(tar.nodeName=='INPUT' && tar.nextElementSibling!==null){
					tar.nextElementSibling.focus()
				}
			}
		</script>
	</body>
</html>