Задание: Необходимо реализовать компонент для ввода цифр номера телефона с возможной маскированной частью. Длина маскированной части может быть произвольной.
Для запуска необходимо собрать проект с помощью команды:
npm run build
Затем необходимо открыть файл index.html с помощью браузера.
Пример создания элемента:
let el = createPhoneNumber('+7(909)***-II-XX');
Созданный элемент можно расположить в DOM дереве.
let a = document.querySelector('.main');
a.appendChild(createPhoneNumber('+7(909)***-II-XX'));
Значение маски хранится в атрибуте value. Можно изменить элемент и его значение с помощью функции update.
let el = createPhoneNumber('+7(909)***-II-XX');
let val = el.value; // val = '+7(909)***-II-XX'
el.update('+8(999)III-II-XX');// el.value = '+8(999)III-II-XX'
Если значение неверное, можно вручную перевести элемент в состояние ошибки и обратно.
el.errorOn(); // Сообщение по умолчанию
el.errorOn('Произошла ошибка, попробуйте снова');
el.errorOff(); //Возврат в безошибочное состояние.