js如何自动切换到下一个输入框

最新推荐文章于 2024-06-12 14:37:52 发布

你知不知

最新推荐文章于 2024-06-12 14:37:52 发布

阅读量1.9k

点赞数 1

文章标签： js css3 html5 javascript

本文链接：https://blog.csdn.net/qq_42899245/article/details/106999023

版权

先上效果图
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>如何自动切换到下一个输入框</title>
	<style>
		input {
			width: 20px;
			height: 20px;
			border: 1px solid #0A8CFF;
		}

		.code {
			color: #C1C1C1;
		}

		.reacquire {
			color: red;
		}
	</style>
	<script>
		function moveNext(object, index) {
			if (object.value.length == 1) {
				document.forms[0].elements[index + 1].focus();
			}
		}

		function showResult() {
			var f = document.forms[0];
			var result = "";
			for (var i = 0; i < 6; i++) {
				result += f.elements[i].value;
			}
			alert(result);
		}
	</script>
</head>

<body onload="document.forms[0].elements[0].focus();">
	<div>
		<p style="color:#0A8CFF">请输入六位验证码</p>
		<form>
			<div>
				<input type="text" size=1 maxlength=1 onkeyup="moveNext(this,0);">
				<input type="text" size=1 maxlength=1 onkeyup="moveNext(this,1);">
				<input type="text" size=1 maxlength=1 onkeyup="moveNext(this,2);">
				<input type="text" size=1 maxlength=1 onkeyup="moveNext(this,3);">
				<input type="text" size=1 maxlength=1 onkeyup="moveNext(this,4);">
				<input type="text" size=1 maxlength=1 onkeyup="moveNext(this,5);"><br>
			</div>
			<p>
				<span class="code">验证码未收到？</span>
				<span class="reacquire">重新获取</span>
			</p>
			<p>
				<button onclick="showResult();">显示所有</button>
			</p>
		</form>
	</div>
</body>

</html>

你知不知

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js如何自动切换到下一个输入框

先上效果图代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>如何自动切换到下一个输入框</title> <style> input { width:
复制链接

扫一扫