Авторизация по номеру телефона

Маска для номера телефона - добавление, удаление

На данной странице приводится описание действий по добавлению маски ввода для поля ввода номера телефона.

Встроеная маска 1С Битркис

С версии 6.3.0 в комопненты модуля добавлено использование встроенной в Битркис маски номера телефона для всех стран. Включается и отключется в настройках модуля. Также можно задать список стран, которые будут вверху списка выбора страны.

2022-04-05_17-54.png

Выглядит она в публичной части примерно так

Peek 2022-04-05 18-10.gif

Добавление или удаление маски

Все примеры приведены библиотеки 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>

Маски для компонентов на Vue

Рассмотрим пример добавления маски для поля ввода номера телефона на примере комопнента 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');

В итоге получится так:

2021-11-23_16-22_1.png