使用jquery动态增加删除input框

使用jquery增加删除input元素
将input输入内容加上限制
οninput=“value=value.replace(/[^\d|xX]/g,’’)”
身份证格式验证
或者
$(’#card’).attr(“oninput”, “this.value=this.value.replace(/[^0-9|xX]/g,’’);”);
id为card的input框输入限制为this.value=this.value.replace(/[^0-9|xX]/g,’’)
两种结果是一样的

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul li{
				display:block;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script>
			$(document).ready(function() {
				var t = $("#num");
				$("#max").click(function() {
					t.val(parseInt(t.val()) + 1); //点击加号输入框数值加1
					if(t.val() <= 5) {
						$('#main').find('ul').append("<li><p>姓名" + t.val() + "：<input type='text' name='order_name[]' autocomplete='off'  required/></p><p>身份证" + t.val() + "：<input type='text' id='card'  maxlength='18' name='order_card[]' autocomplete='off' required/><p/></li>");
						$('#card').attr("oninput", "this.value=this.value.replace(/[^0-9|xX]/g,'');");
					}
					if(t.val() > 5) {
						t.val(parseInt(t.val()) - 1); //最小值为1
					}
				});
				$("#min").click(function() {
					t.val(parseInt(t.val()) - 1); //点击减号输入框数值减1
					$("#main li").last().remove();
					if(t.val() <= 0) {
						t.val(parseInt(t.val()) + 1); //最小值为1
					}
				});
			});
		</script>
	</head>

	<body>
		<p>数量：
			<input style="width:40px;" id="min" type="button" value="-" />
			<input style="width:40px;" id="num" name="num" type="text" value="1" autocomplete="off" readOnly/>
			<input style="width:40px;" id="max" type="button" value="+" />
		</p>
		<div>
			<p>姓名1：<input type="text" name="order_name[]" autocomplete="off" required/></p>
			<p>身份证1：<input type="text" name="order_card[]" maxlength='18' oninput="value=value.replace(/[^\d|xX]/g,'')" autocomplete="off" required/>
				<p/>
				<div id="main">
					<ul></ul>
				</div>
		</div>
	</body>

</html>

通过点击增加按钮来增加一组input框
点击删除按钮来删除一组input框
这里设置的最少一个，最多五个
根据需求来进行修改

效果图就不放了大家复制代码自行修改吧

jianchenn

发布了22 篇原创文章 · 获赞 2 · 访问量 428

私信关注

使用jquery动态增加删除input框

猜你喜欢