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