Для добавления маски в поле телефона нужно:
- Подключить библиотеку jQuery.
- Скачать плагин masketinput.
- Подключить плагин к определённым полям ввода.
Как подключить библиотеку jQuery
Есть несколько способов подключить библиотеку jQuery: скачать файл в папку или подключить напрямую.
Рассмотрим второй вариант.
Для подключения рекомендую использоваться подключение от Google Developers. Наша задача скопировать строку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
и вставить эту строчку перед закрывающимся тегом </head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
</body>
</body>
</html>
Как скачать плагин и добавить его на сайт
Скрипт плагина можно скачать тут
Добавьте файл в Вашу папку со скриптами и подключите его, добавлением строки после подключения библиотеки jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/js/jquery.maskedinput.min.js"></script>
</head>
<body>
</body>
</html>
Как создать HTML маску ввода
Теперь нужно подключить плагин к полю ввода, для этого добавим небольшой скрипт перед закрывающимся тегом body и добавим наш <input>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Подключаем библиотеку-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/js/jquery.maskedinput.min.js"></script>
</head>
<body>
<input type="text" placeholder="Телефон" class="phone_mask">
<script>
$(".phone_mask").mask("+375 (99) 999-99-99");
</script>
</body>
</html>
Результат добавления маски на сайте www.silverweb.by
