Добавляем маску для поля ввода телефона на сайте

Для добавления маски в поле телефона нужно:

  1. Подключить библиотеку jQuery.
  2. Скачать плагин masketinput.
  3. Подключить плагин к определённым полям ввода.

Как подключить библиотеку 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>

Результат добавления маски