Найти тему

Маска телефона для input всего 1 строкой кода

Оглавление

Сегодня познакомлю с интересной библиотекой maskedinput.js. Если посмотреть на гите, то можно заметить - библиотека не из свежих, но достойных альтернатив маловато. Сам файл плагина весит всего 4кб, подрубается всего 1 строкой JS кода, а зато сколько всего умеет. Сейчас все расскажу.

Устанавливаем

📎Качаем модуль с Гугл диска или с GitHub.

🪓Подрубаем его перед </body> :

Не забудьте подключить jQuery!
p.s. дико неудобно что на дзене нет поддержки кода, приходится все заливать на gist 😕

Используем

🪓Вставляем в файл скриптов, либо в HTML сайта через <script>...</script> эту кодулю:

Здесь мы указали: класс поля .phonemask, к которому будем прикручивать маску для телефона, и собственно саму маску +7 (999) 999 99-99 которая любую вводимую в поле информацию будет приводить к этому виду.

🪓И дописываем этот класс к нашему полю:

<input type="text" name="phone" class="phonemask">
И не соврал - работает!
И не соврал - работает!

Другие маски

Помимо масок для номеров телефона, плагин позволяет сделать маски:

🗓Для даты

$(".datemask").mask("99/99/9999");

💳Для номера карты

$(".cardmask").mask("9999-9999-9999-9999");

🔢И даже для обычных чисел

$(".numbermask").mask("0.9?9");

Подписаться на @wjourn 🔥