Маска ввода телефона для полей input
17 февраля 2020 JavaScript jQuery
На данный момент маски ввода телефона, как например +7 (___) ___ — __ повсеместно используются на сайтах. Это исключает ошибки при вводе и проверке вводимых данных, а так же приводит сбор данных к единому формату. Как просто сделать такую и другие маски ввода рассмотрим в этой статье.
Для создания маски в полях ввода существуют различные плагины jQuery. На мой взгляд самый лучший и быстрый вариант это плагин jQuery Inputmask от Robin Herbots. Он стабильно работает и у него большое количество возможностей и настроек.
Создание маски ввода с помощью плагина jQuery Inputmask
Скачиваем плагин . Там же находится полная документация по настройке плагина. И подключаем к сайту download партнерки скрипт jquery.maskedinput.min.js из папки dist. Перед скриптом конечно же нужно подключить библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="/js/jquery.inputmask.min.js"></script>
Теперь вызываем функцию маски ввода и указываем в ней шаблон ввода, например +7 (999) 999-9999. Код необходимо разместить перед закрывающим тегом </body>.
<script>
$(document).ready(function(){
$(".phone").inputmask("+7 (999) 999-9999");
});
</script>Теперь маска ввода телефона по этому шаблону будет работать у всех полей, у которых будет указан class="phone":
<input type="text" placeholder="Ваш номер телефона" class="phone" name="phone" />
В шаблоне можно задавать все, что угодно: цифры, буквы, символы и т.д. Самые часто используемые это цифры и буквы. В шаблоне 9 — это любая цифра от 1 до 9; A — это любая буква. Например:
<script>
$('.phone').inputmask('999[-AAA]');
</script>Так же маску ввода можно задать непосредственно в самом input с помощью атрибута data-inputmask:
<input data-inputmask="'mask': '+7 (999) 999-9999'" />
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
Добавить комментарий