![](/img/trans.png)
[英]How to add onfocus event listener to input field to change the style of the labels
[英]How to style add input field from add in a form style?
當我在添加點擊中添加輸入時,我的 html 遇到了一些問題,讓我向您展示下圖中的含義
添加和刪除在那里,因為我在單擊添加時創建了一個新輸入,並在不需要它時刪除了新輸入
這是我的輸入字段和 function 的代碼
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;">Add</label></a>
<a onclick="remove()">remove</a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
<script>
$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<div><input type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' required><div class='invalid-feedback'>Enter a correct PhoneNumber!</div></div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
</script>
現在我是如何在聯系人右側設置我的添加刪除:輸入框以及如何使我的新輸入不將它們擠在一起?
你忘記了這個class='form-control'
你應該改變這一行
var new_input = "<div><input type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' required><div class='invalid-feedback'>Enter a correct PhoneNumber!</div></div>";
對此
var new_input = "<div><input type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' class='form-control' required><div class='invalid-feedback'>Enter a correct PhoneNumber!</div></div>";
希望這可以幫助你:
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-6">
<div class="row">
<div class="col-9 form-group">
<input id="validationNumber" name="phonenumber" type="text" class="form-control " pattern="\b\d{8}\b" required>
</div>
<div class="col-form-label">
<a class="d-inline m-1" onclick="add()"><label style="cursor: pointer;">Add</label></a>
<a class="d-inline m-1" onclick="remove()">remove</a>
</div>
</div>
<div class="row form-group">
<div class="col-9" id="new_chq">
</div>
</div>
<input type="hidden" value="1" id="total_chq">
</div>
</div>
我也改變了你的 js 代碼:
<script>
$('.add').on('click', add);
$('.remove').on('click', remove);
function add() {
var new_chq_no = parseInt($('#total_chq').val()) + 1;
var new_input = "<input class='form-control mb-3' type='text' id='new_" + new_chq_no + "'pattern='^[0-9]{8}$' required><div id='newAlert_" + new_chq_no + "' class='invalid-feedback'>Enter a correct PhoneNumber!</div>";
$('#new_chq').append(new_input);
$('#total_chq').val(new_chq_no);
}
function remove() {
var last_chq_no = $('#total_chq').val();
if (last_chq_no > 1) {
$('#new_' + last_chq_no).remove();
$('#newAlert_' + last_chq_no).remove();
$('#total_chq').val(last_chq_no - 1);
}
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.