Маска ввода телефона на jQuery
Заказчики лэндингов часто просят сделать маску ввода телефона, желая таким образом задать определённый стандарт вводимых номеров клиентами. Для реализации поставленной задачи необходимо подключить библиотеку jQuery.
Поставьте следующий код перед закрывающимся тегом body:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Дальше вам надо скачать плагин с официальной его страницы: http://plugins.jquery.com/maskedinput/, в папку js и вставить код в HTML-файл после библиотеки jQuery:
<script src="js/jquery.maskedinput.min.js"></script>
Для быстроты создадим форму на Bootstrap, с полями ввода для имени и телефона, это такой стандартный вариант для лэндингов. Не забываем в шапку подключить ссылку на bootstrap.min.css.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Маска ввода телефона на jQuery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
form {
background-color: #f3f3f3;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<form action="" method="POST">
<legend>Название формы</legend>
<div class="form-group">
<label for="">Ваше имя</label>
<input type="text" class="form-control" id="" name="name" placeholder="Имя">
</div>
<div class="form-group">
<label for="">Ваш номер телефона</label>
<input type="tel" class="form-control" id="phone" name="phone" placeholder="+7 (999) 99 99 999">
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
</body>
</html>
На скриншоте вы видите форму с маской для телефона, когда поле для ввода в фокусе. Это уже отрабатывает плагин jQuery Masked Input.
Инструкция по работе плагина
На GitHub есть подробная инструкция по работе плагина jQuery Masked Input. Между тегами <script>..</script> напишем простой и короткий код.
Первым делом пропишем стандартную форму
$(document).ready(function()
для того, чтобы скрипт начинал работать, только после того, как вся структура DOM всех элементов загрузилась и была готова. Находим на сайте функцию .mask, которая как раз и позволяет нам сделать определённую маску, используя которую, мы можем заставить пользователя, ввести нужную нам информацию.
Из примера на сайте, возьмем маску для телефона.
$("#phone").mask("(999) 999-9999");
Пропишем в input для телефона у нашей формы id="phone", он должен совпадать с #phone в параметрах плагина. Затем указываем свою маску:
$("#phone").mask("+7 (999) 99-99-999");
В итоге наш код будет таким:
<script>
$(document).ready(function() {
$("#phone").mask("+7 (999) 99-99-999");
});
</script>
Теперь пользователь может вводить в поле для телефона только цифры, в определенном количестве и порядке. Для гибкой маски этот плагин не подойдет.
Посмотреть как работает маска при вводе телефона можете здесь:
-
Создано 04.07.2018 10:19:56
-
Михаил Русаков
Комментарии (4):
Михаил здравствуйте, спасибо за полезную статью. Возникло 2 вопроса: - Почему в данном случае jQuery подключается в body, а не в head'e (или это не принципиально)? - Можно ли обращаться к полю не через id - $("#phone"), а через имя $("#phone")? Заранее спасибо.
Ответить
да, можно подключать скрипты везде, это не принципиально. Можно обращаться просто к названию селектора, так как в коде стоит, если они без классов или id.
Ответить
А если не так $(document).ready(function() { $("#phone").mask("+7 (999) 99-99-999"); , А если сделать так $(document).ready(function() { $("#phone").mask("+7 (999) 999-99-99"); ,маска будет работать так чтобы сначала сначала номера (после скобок) вводилось три цифры а потом по две
Ответить
всё сделал и у меня пол сайта не работает,а именно не переключаются модели телефонов , нет анимации ни какой, и на мобильной версии сайт начинает не коректно отображаться... в чем дело....может что ни так делаю.... и если есть возможность сделайте видео по этой статье, помогло бы очень разобраться... заранее спасибо.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.