在制作一些表单的时候,要考虑到客户的信息多样性,比如电话号码。下面是一个动态生成电话号码框的案例,点击新增添加一个电话号码的输入框,并且可以点击删除去掉多余的输入框。下面是一个使用bootstrap制作的案例。
使用方法
在html中引入js和css
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
HTML结构
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h4 class="mb-3">注册模板</h4>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-12 mb-3">
<label for="firstName">姓名</label>
<input type="text" class="form-control" id="firstName" placeholder="请输入姓名" value="" required>
<div class="invalid-feedback">
姓名是必填字段!
</div>
</div>
</div>
<div class="mb-3">
<label for="email">邮箱 <span class="text-muted">(可选)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback">
请输入邮箱以便我们联系到您!
</div>
</div>
<div class="mb-3">
<label for="address">居住地址</label>
<input type="text" class="form-control" id="address" placeholder="" required>
<div class="invalid-feedback">
居住地址是必填字段!
</div>
</div>
<div class="mb-3 firstPhone">
<label for="phone">联系电话</label>
<label for="phone"><button class="btn btn-outline-secondary addPhone" type="button" onclick="addPhone()">新增</button></label>
<input type="text" class="form-control" id="phone" placeholder="" required>
<div class="invalid-feedback">
联系电话是必填字段!
</div>
</div>
<div class="mb-3">
<label for="sex">性别</label>
<div class="custom-control custom-radio">
<input id="sex" name="sex" type="radio" class="custom-control-input" value="x" checked required>
<label class="custom-control-label" for="sex">男</label>
</div>
<div class="custom-control custom-radio">
<input id="sex2" name="sex" type="radio" class="custom-control-input" value="y" required>
<label class="custom-control-label" for="sex2">女</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>兴趣爱好 <span class="text-muted">(可选)</span></label></label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="yy" value="yy">
<label class="custom-control-label" for="yy">游泳</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ds">
<label class="custom-control-label" for="ds">登山</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="run">
<label class="custom-control-label" for="run">跑步</label>
</div>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">注册</button>
</form>
</div>
</div>
</div>
JavaScript代码
function addPhone(e) {
let id = "phone"+$(".phone").length;
$(".firstPhone").after("<div class=\"mb-3 phone\" id=\""+id+"\" >\n" +
" <label for=\"phone1\">联系电话"+$(".phone").length+"</label>\n" +
" <div class=\"input-group is-invalid\">\n" +
" <input type=\"text\" class=\"form-control\" id=\""+id+"\" placeholder=\"\">\n" +
" <div class=\"input-group-append\">\n" +
" <button class=\"btn btn-outline-secondary\" type=\"button\" onclick='deletePhone(\""+id+"\")'>删除</button>\n" +
" </div>\n" +
" </div>\n" +
" </div>")
}
function deletePhone(id){
let id1 = "#"+id
$(id1).remove();
}
以上就是一个jQuery动态添加文本框的案例,希望对你有帮助。