Компонент для ввода цифр номера телефона

Компонент написан на TypeScript и представляет собой компонент для ввода цифр номера телефона с возможной маскированной частью любой длины.

Компонент имеет несколько состояний (normal, hover, active, error), которые отражены ниже.

Демо

Если введенная комбинация не 44, то будет ошибка

Ссылка

Ссылка в npm

Ссылка

Что внутри

• Rollup
• TypeScript
• Node.js
• Mocha

Базовое использование

Создание компонента

let mask = '+7(985)0II-**-**';
let phoneVerify = new Calendar(callback, mask);

calendar.create(root);

callback - функция с одним аргументом, куда будет передана строка с введенными символами

mask - строка с маской, по которой будет создан компонент

root - HTML элемент к которому будет присоединен компонент.

Пояснения к маске

Допустимые значения:

• "I" - одиночный инпут для ввода одной цифры
• "X" - серый блок с символом "X"
• "*" - серый блок с символом "●"
• <цифра> - серый блок с введенной цифрой
• <не цифра> - символ отображается "как есть"

Если будут введены буквы русского или английского алфавитов(кроме специальных символов) компонент не будет создан

Сборка проекта

Проект написан на TypeScript и представляет собой демонстрацию компонента, сам компонент находится в /src/scripts/components.

Чтобы собрать проект, нужно выполнить команду

npm run build

Чтобы запустить его локально

npm start

Тесты

Для тестирования используется тест-фреймворк Mocha

Тесты находятся в /src/test.

Запустить их можно командой

npm test

Документация

Документация создана с помощью TypeDoc

Ссылка

Чтобы сгенерировать документацию

npm run doc