Заказчики лэндингов часто просят сделать маску ввода телефона , желая таким образом задать определённый стандарт вводимых номеров клиентами. Для реализации поставленной задачи необходимо подключить библиотеку 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>
Теперь пользователь может вводить в поле для телефона только цифры, в определенном количестве и порядке. Для гибкой маски этот плагин не подойдет.
Посмотреть как работает маска при вводе телефона можете здесь:
