如何從添加表單樣式中添加輸入欄位的樣式？

當我向添加單擊添加輸入時，我的 html 遇到了一些問題 讓我向您展示下圖中的含義

添加和刪??除在那里，因為我在單擊添加時創建了一個新輸入，并在不需要時洗掉了新輸入

這是我的輸入欄位和函式的代碼

<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>

現在我想知道如何在聯系人右側添加洗掉樣式：輸入框以及如何使我的新輸入不將它們擠在一起？

uj5u.com熱心網友回復：

你忘了這個 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>";

uj5u.com熱心網友回復：

希望這可以幫助您：

<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>

標籤：javascript html css 输入

上一篇：如何在矩形div中添加圓形

下一篇：如何在兩個div之間創建一個三角形？CSS