На данной странице приводится описание действий по добавлению маски ввода для поля ввода номера телефона.
С версии 6.3.0 в комопненты модуля добавлено использование встроенной в Битркис маски номера телефона для всех стран. Включается и отключется в настройках модуля. Также можно задать список стран, которые будут вверху списка выбора страны.
Выглядит она в публичной части примерно так
Все примеры приведены библиотеки inputmask - https://github.com/RobinHerbots/Inputmask . Для остальных библиотек действия будут примерно похожими.
//добавление
$(selector).inputmask({"mask": "7 (999) 999-9999"});
// удаление
$(selector).inputmask('unmaskedvalue');
Для решений от Аспро используется эта же библиотека, но на странице уже существует формат номера, который задается в админке. Поэтому можно его не указывать вручную а использовать из соответствующей переменной на странице
// здесь же можно налозить маску на поля
var mask = '7 (999) 999-99-99';
// следующая инструкция позволяет использоваться масску из настроек на решениях от Аспро
if (!!window.arAsproOptions && !!arAsproOptions['THEME'] && !!arAsproOptions['THEME']['PHONE_MASK']) {
mask = arAsproOptions['THEME']['PHONE_MASK'];
}
var maskParams = {
mask: mask,
showMaskOnHover: false,
};
$('input[name=phone]').inputmask('mask', maskParams);
$('input[name=register_phone]').inputmask('mask', maskParams);
$('input[name=forget_phone]').inputmask('mask', maskParams);
Когда необходимо убрать маску, нужно определить велектор для поля и выполните как на примере ниже. Разместить можно либо на странице, либо например в подвале сайта (футере), или еще где то.
<script type="text/javascript">
$('input[name=phone]').inputmask('unmaskedvalue');
</script>
Рассмотрим пример добавления маски для поля ввода номера телефона на примере комопнента Simple
Для клиентской стороны нам необходимо написать мутацию для компонента, в которой добавим маску. Для этого создаем файл {путь до шаблона}/js/bxmaker.authuserphone.js
в директории с шаблоном сайта
// наложение маски в компонентах с использованием vue - Simple, Enter, Edit
if(BX && BX.Vue){
BX.Vue.mutateComponent('BXmakerAuthuserphoneInput',
{
mounted: function () {
if (this.name === 'PHONE') {
var that = this;
$(this.$refs.input).inputmask('mask',
{
'mask': '7(999) 999-9999',
'onKeyDown': function (event) {
setTimeout(function () {
that.onInput(event);
}, 0);
}
}
);
}
},
beforeDestroy: function () {
if (this.name === 'PHONE') {
$(this.$refs.input).inputmask('unmaskedvalue');
}
},
}
);
}
Подключаем в шапке шаблона сайта - header.php
например так
$Asset = \Bitrix\Main\Page\Asset::getInstance();
$Asset->addJs(SITE_TEMPLATE_PATH . '/js/bxmaker.authuserphone.js');
В итоге получится так: