编号规则限制_两个输入框光标自动跳转

最新推荐文章于 2024-05-21 09:57:38 发布

在线笔记本

最新推荐文章于 2024-05-21 09:57:38 发布

阅读量233

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/wangshao5122/article/details/109292628

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

编号规则：两组数字，前面8位后面5位
如：12345678-12345

关键点：
1、maxlength=“8” 标签属性，限制输入8位字符；
2、οnkeyup=“return aa()” 松开按键后执行函数；
3、$("#bb").focus() 光标锁定；
4、RegExp()中的正则表达式，输入框中只能输入文字；

Jquery引用地址：jquery-3.4.1.min.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>编号规则限制</title>
</head>
<body>
<div class="form-group">
	<label>备案号</label>
	<input type="text" id="aa" maxlength="8" onkeyup="return aa()">-
	<input type="text" id="bb" maxlength="5">
</div>
<div id="ti" style="color:red;"></div>
<script src="jquery-3.4.1.min.js"></script>
<script> 

 function aa(){
	//根据规则，光标自动跳转
	if($("#aa").val().length == 8){
		$("#bb").focus();
	}

	//正则校验：只能输入数字
	var pwdRegex = new RegExp(/^\d+$|^\d+[.]?\d+$/);
	if (!pwdRegex.test($("#aa").val())){
		$("#ti").html("只能输入数字");
	}else{
		$("#ti").html("");
	}
 }
</script>
</body>
</html>