Маска для динамических полей input

117

09 июля 2019, 15:00

Есть блок, который создает 5 input элементов при нажатии на кнопку, в этих input элементах у меня должна быть маска для ввода. Использую jquery mask Но, у меня не получается это реализовать
p.s. код урезал, оставил только 1 input

<script>
    var count = 1;
    $('#add').click(function() {
    count++;
    var obj = document.getElementById('field')
    var divtest = document.createElement("div");
      divtest.setAttribute("class", "form-group removeclass"+count);
      var rdiv = 'removeclass'+count;
    divtest.innerHTML = '<input type="text" name="phone[]" id="phone('+ count +')" class="form-control" placeholder="+7 (___) ___ __ __">';
    $('#phone('+ count +')').mask("(999) 999-99-99");
    obj.appendChild(divtest);
})
   function remove_field(rid) {
       $('.removeclass'+rid).remove();
   }
    </script>

Answer 1

var count = 1; 
$('#add').click(function() { 
 
  count++; 
  var obj = document.getElementById('field') 
  var divtest = document.createElement("div"); 
  divtest.setAttribute("class", "form-group removeclass" + count); 
  var rdiv = 'removeclass' + count; 
  divtest.innerHTML = `<input type="text" name="phone${count}" id="phone${count}" class="form-control" placeholder="+7 (___) ___ __ __">`; 
  $(`<button type="button" class="close" aria-label="Close"> 
  <span aria-hidden="true">&times;</span> 
</button>`).appendTo(divtest).on('click', removeInput); 
  obj.appendChild(divtest); 
  $('#phone' + count).mask("(999) 999-99-99"); 
}) 
 
function removeInput(event) { 
  $(event.target).parent().remove(); 
}

.form-group .close { 
  position: absolute; 
  top: 0.3rem; 
  right: 1rem; 
  color: red; 
} 
 
.form-group { 
  position: relative; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 
 
<div id="field"></div> 
<button id="add" class="btn btn-outline-primary">Add phones</button>