Input Mask

Поле для ввода с маской

Для активного состояния

<div class="ml-input">
    <input type="text" data-mask class="ml-input__input" placeholder="+7 (      )       -    -    ">
</div>

Для состояния некорректного ввода

<div class="ml-input ml-input--error">
    <input type="text" data-mask class="ml-input__input" placeholder="+7 (      )       -    -    ">
    <div class="ml-input__clear" data-input-clear></div>
</div>

Расширенные настройки

Маска инициализируется атрибутом data-mask

В placeholder маска не связана с js и указывается отдельно

Для настройки маски - container - инпуты к которым применяем маску mask - сама маска где символ "_" место где возможно ввести цифру caret - Начальное положение каретки при фокусе (сколько знаков слева пропустить)

    mask = new mlMaskPhone({
        container: '[data-mask]',
        mask: '+7 (___) ___-__-__',
        caret: 4
    });
                

npm репозиторий - [https://www.npmjs.com/package/@megalabs/ml-input] (https://www.npmjs.com/package/@megalabs/ml-input)

Для установки пакета

• nnpm i @megalabs/ml-input
• затем в папке @megalabs/ml-input запускаем npm install
• npm start