Маски для input на JS
Сегодня познакомлю с интересной библиотекой maskedinput.js. Если посмотреть на гите, то можно заметить - библиотека не из свежих, но достойных альтернатив маловато. Сам файл плагина весит всего 4кб, а зато сколько всего умеет. Сейчас все расскажу.
Устанавливаем
📎Качаем модуль с Гугл диска или с GitHub.
🪓Подрубаем его перед </body> :
<script src="js/jquery.maskedinput.min.js"></script>
Не забудьте подключить jQuery!
Используем
🪓Вставляем в файл скриптов, либо в HTML сайта через <script>...</script> эту кодулю:
$(document).ready(function () {
$(".phonemask").mask("+7 (999) 999 99-99");
});Здесь мы указали: класс поля .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");