There is the following construction, when you click into the first field, a mask is created for entering the phone, it is created by the connected jquery.maskedinput.min.js script on the #phone #phone When you click on the second identical field, the mask is not created, I think this is because of what I incorrectly pointed out function call, help fix.

 $(document).ready(function() { $("#phone").mask("+7(999) 999-9999"); }); 
 .form { margin: 10px 0px; } .form input { height: 36px; padding: 0px 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> <div class="form"><input type="text" placeholder="Телефон" id="phone" ></div> <div class="form"><input type="text" placeholder="Телефон" id="phone" ></div>

    1 answer 1

    There are elements with the same id="phone" in your html. The sample by id (since it expects the uniqueness of this property) finds only one of them - the first one. Use class :

     $(document).ready(function() { $(".phone").mask("+7(999) 999-9999"); }); 
     .form { margin: 10px 0px; } .form input { height: 36px; padding: 0px 10px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script> <div class="form"><input type="text" placeholder="Телефон" class="phone" ></div> <div class="form"><input type="text" placeholder="Телефон" class="phone" ></div>

    • All ingenious is simple! Excellent, works! Well, he asked, otherwise I already climbed into some jungle)) Thank you very much! - Slava