1

Есть следующая конструкция, при клике в первое поле создается маска для ввода телефона, ее создает подключенный скрипт jquery.maskedinput.min.js по индификатору #phone При клике во второе идентичное поле, маска не создается, думаю это из за того что я неправильно указал вызов функции, помогите исправить.

$(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 ответ 1

1

В Вашем html присутствуют элементы с одинаковыми id="phone". Выборка по id (так как ожидает уникальности этого свойства) находит только один из них - первый. Используйте 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>

1
  • Все гениальное - просто! Отлично- работает! Хорошо что спросил, а то я уже в какие-то дебри полез )) Большое спасибо!
    – Slava
    23 мар 2018 в 22:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.