当前位置：网站首页>JS verification code input number auto skip

JS verification code input number auto skip

2022-06-25 05:06:00 【Lijianyi】

Use Js Auto skip for verification code input
HTML part ：

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

$(function(){
    
	let inputNumber = $(".inputNumber");
	inputNumber.focus(function(event){
    
		inputNumber.keyup(function(event){
    
			// console.log(event.which);
			switch(event.which){
    
				case 39:
					console.log(" towards the right ");
					$(this).next().focus();
					break;
				case 37:
					console.log(" towards the left ");
					$(this).prev().focus();
					break;
				case 8: 
					console.log(" Delete ");
					$(this).prev().focus();
					break;
				default:
					let valueNumber = $(this).val();
					if(valueNumber === "" || valueNumber == null){
    
						return false;
					}
					if(!isNaN(valueNumber)){
    
						$(this).next().focus();
					}else{
    
						alert(" Not numbers ");
						$(this).val("");
					}
			}
		})
	})
})

here CSS The code is not pasted , If you need to do it yourself .
principle ：
When input Input box gets focus , And when the keyboard key is lifted , Trigger method , Mainly to obtain ： Left key 、 Press the right key 、backspace Key 、 Number buttons .
This process changes the focus of the input field .

原网站

版权声明
本文为[Lijianyi]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202210525566812.html

边栏推荐

猜你喜欢

随机推荐