В этой статье вы прочитаете обзор JavaScript библиотеки Cleave.js, которая нужна для работы с формой, а точнее чтобы вы могла понятно ввести номер телефона или дату, или даже создать кастомный тип формы.
Также если вас интересуют различные JS библиотеки, то рекомендую почитать статью «JavaScript Библиотека Stretchy основы работы с ней», в ней вы прочитаете про библиотеку для автоматического изменения размера формы и элемента.
Подключение Cleave.js:
Перед тем как с ней работать вам нужно её скачать, у вас есть три варианта как это сделать, первый, это скачать сам дистрибутив, для этого заходим на GitHub проекта и скачиваем всё что там есть нажимая кнопку «Download ZIP»:
После того как вы скачали, переходите в папку проекта и нахоlим в ней папку «dist», из неё берём файл «cleave.min.js» или «cleave.js», ещё если вы используете какой-то фреймворк, то можете специально для него взять файл, например «cleave-react.js». Переносим файл который вам нужен в папку с проектом и подключаем его через тег <script>.
Если же вы не хотите так устанавливать, то тогда можете просто подключить через CDN, вот что вам в таком случае надо подключать:
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.6.0/cleave.min.js" integrity="sha512-KaIyHb30iXTXfGyI9cyKFUIRSSuekJt6/vqXtyQKhQP6ozZEGY8nOtRS6fExqE4+RbYHus2yGyYg1BrqxzV6YA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
Ну и последние, вы можете установить библиотеку через NPM, для этого в терминале пропишите вот такую команду:
1 | npm install --save cleave.js |
После того как вы всё установили, можете потихоньку начать работать с этой библиотекой.
Работа с Cleave.js:
Для начала вам нужно объявить текстовой input, вот как это делается:
1 | <input class="input-phone" type="text"/> |
Тут стоит отметить, что класс вы должны формировать зависимо от того, какой тип инпута вам нужен, то есть тут мы создаём инпут для телефонного номера, и значит нам нужен класс input-phone, чтобы погрузились стили для этого типа пол. Класс формируется таким образом inpyt-type_input, в качестве type_input вставляем тип нашего инпута.
Когда вы добавили инпут, то теперь переходим к коду JavaScript, тут всё совсем просто, для начала покажу как код будет выглядеть для телефона:
1 2 3 4 | var cleave = new Cleave('.input-phone', { phone: true, phoneRegionCode: '{country}' }); |
То есть мы тут задаём параметр phone, что обозначает что мы создаём форму именно для телефонного номера, вот что у вас должно получиться:
Такой же принцип и с остальными типами формами, вот вам ещё пару примеров.
Код формы для кредитной карты:
1 2 3 4 5 6 | var cleave = new Cleave('.input-elemen', { creditCard: true, onCreditCardTypeChanged: function (type) { // update UI ... } }); |
Вот что получиться:
Теперь посмотрите на код объявления для инпута для даты:
1 2 3 4 5 | var cleave = new Cleave('.input-element', { date: true, delimiter: '-', datePattern: ['Y', 'm', 'd'] }); |
Вот что получилось:
Также стоит сказать, что все тут примеры не будут выглядеть так же, так как я взял примеры с официального сайта, и там используются дополнительные стили, но у вас должно выглядеть это по похожему.
Вывод:
В этой статье мы разобрали основы работы с JavaScript библиотекой Cleave.js, и как видите тут не чего сложного нет, думаю вам было это интересно и полезно, если она вас заинтересовала, то подробнее о ней вы узнаете на официальном сайте проекта.
Подписываетесь на соц-сети:
Оценка:
Загрузка...