Как сделать маску номера телефона

12 августа 2020 г., 0:38 3 минуты на чтение

Сделать маску для номера телефона – часто встречающаяся задача при реализации форм ввода пользовательских данных. Маска помогает не только упростить заполнение форм, улучшить интерфейс, но также исключить некоторые проверки при сборе данных с формы. Рассмотрим существующие решения для оснащения поля input маской номера телефона.

Содержание

Возможные варианты решения
Использование поля ввода для телефона
Использование плагина
Пример #1

Возможные варианты решения

Использование поля ввода для телефона <input type=’tel’>

Данный вариант и вариантом назвать сложно, поскольку всю работу (по расстановке скобок, дефисов и прочего) приходится выполнять пользователю, что совсем неудобно. А форма лишь проверяет содержимое по заданному шаблону.

1	<input type="tel" placeholder='+7-999-999-99-99'pattern="\+7-[0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}" required>

В нашем случае шаблон выглядит так: +7-999-999-99-99, если содержимое не соответствует шаблону – форма не валидна. Такая форма ввода не может похвастаться дружелюбным интерфейсом, поскольку пользователь вводит все сам в соответствии с примером, который вы можете разместить в placeholder или где-нибудь еще. С примером можно ознакомиться ниже.

Использование плагина

Плагинов для решения данной задачи на просторах интернета можно найти немало, мы рассмотрим самый распространенный, и рабочий вариант jquery.maskedinput, взять его можете, где-угодно, например на официальном сайте jQuery , или подключить через CDN

Перед началом работы необходимо подключить библиотеку jQuery. Сам плагин подключается элементарно:

$('input[name="phone"]').mask('+7 (999) 999-99-99');

1	$('input[name="phone"]').mask('+7 (999) 999-99-99');

в параметрах указываем шаблон для ввода. В шаблоне доступны следующие обозначения:

a — буквы латинского алфавита
9 — цифры
* — цифры и буквы латинского алфавита
? — необязательная часть, не требует ввода

В качестве разделителей можете использовать все-что захотите и в любом количестве. Плагин самостоятельно выводит маску, а также блокирует ввод символов, не соответствующих шаблону:

Для удобства работы с формой ввода можно добавить фокусировку, тогда при клике по полю Input курсор будет автоматически устанавливаться на место первого символа.

$('input[name="phone"]').click(function(){ $(this).focus(); })

$('input[name="phone"]').click(function(){

$(this).focus();

})

Пример #1

See the Pen
WOV MaskedPhoneInput by Paul (@1110000)
on CodePen.