js验证码输入数字自动跳格

最新推荐文章于 2022-09-17 09:57:15 发布

李剑一

最新推荐文章于 2022-09-17 09:57:15 发布

阅读量1.2k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Feng_ye__/article/details/104199281

版权

javascript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

使用Js进行验证码输入自动跳格
HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div>
			<input type="text" maxlength="1" class="inputNumber" />
			<input type="text" maxlength="1" class="inputNumber" />
			<input type="text" maxlength="1" class="inputNumber" />
			<input type="text" maxlength="1" class="inputNumber" />
		</div>
		<script src="js/index.js"></script>
	</body>
</html>

Js部分：

$(function(){
	let inputNumber = $(".inputNumber");
	inputNumber.focus(function(event){
		inputNumber.keyup(function(event){
			// console.log(event.which);
			switch(event.which){
				case 39:
					console.log("向右");
					$(this).next().focus();
					break;
				case 37:
					console.log("向左");
					$(this).prev().focus();
					break;
				case 8: 
					console.log("删除");
					$(this).prev().focus();
					break;
				default:
					let valueNumber = $(this).val();
					if(valueNumber === "" || valueNumber == null){
						return false;
					}
					if(!isNaN(valueNumber)){
						$(this).next().focus();
					}else{
						alert("不是数字");
						$(this).val("");
					}
			}
		})
	})
})