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

最新推荐文章于 2022-07-24 21:00:30 发布

李剑一

最新推荐文章于 2022-07-24 21:00:30 发布

阅读量1.1k

点赞数 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("");
					}
			}
		})
	})
})

这里CSS代码没有贴，需要的自己搞一下就行。
原理：
当input输入框获得焦点，且键盘按键抬起时，触发方法，主要是获得：向左按键、向右按键、backspace按键、数字按键。
这个过程中改变获取输入框焦点。

李剑一

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js验证码输入数字自动跳格

使用Js进行验证码输入自动跳格HTML部分：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/index.css" /> <scrip...
复制链接

扫一扫