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

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

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

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

Все примеры приведены библиотеки inputmask. Для остальных библиотек действия будут примерно похожими.

//добавление
$(selector).inputmask({"mask": "7 (999) 999-9999"});

// удаление
$(selector).inputmask('unmaskedvalue');

Для решений от Аспро используется эта же библиотека, но на странице уже существует формат номера, который задается в админке. Поэтому можно его не указывать вручную а использовать из соответствующей переменной на странице

if(arAsproOptions['THEME']['PHONE_MASK']){
    $('input[name=phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
    $('input[name=forgot_phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
    $('input[name=register_phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
}
else
{ 
    $('input[name=phone]').inputmask({"mask": "7 (999) 999-9999"});
    $('input[name=forgot_phone]').inputmask({"mask": "7 (999) 999-9999"});
    $('input[name=register_phone]').inputmask({"mask": "7 (999) 999-9999"});
}

Убираем маску на решениях от Аспро

Для компонента авторизации/регистрации с возможность входа по номеру телефона, логину и паролю может потребоваться убрать маску с номером телефона, для возможности ввода email адреса.

Для решения этой проблемы необходимо разместить на странице, желательно в футере следующий код

<script type="text/javascript">
//  пример для комопнента bxmaker:authuserphone.login

$(".c-bxmaker-authuserphone_login-default-box input").inputmask('unmaskedvalue');
</script>

Также этот код можно разместить в js файле вашего шаблона, желательно в конце, чтобы выполнился метод после инициализации маски.

Либо отложить выполнение и расположить рядом с компонентом на странице

<script type="text/javascript">
//  пример для комопнента bxmaker:authuserphone.login

setTimeout(function(){
    $(".c-bxmaker-authuserphone_login-default-box input").inputmask('unmaskedvalue');
}, 1000);
</script>

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

Рассмотрим пример добавления маски для поля ввода номера телефона для компонента упрощенной авторизации регистрации - bxmaker:authuserphone.simple

Для клиентской стороны нам необходимо написать мутацию для компонента, в которой добавим маску. Для этого создаем файл bxmaker.authuserphone.js со следующим содержимым

BX.Vue.mutateComponent('BxmakerAuthuserphoneInput',
    {
        mounted: function() {
            var that = this;
            $(this.$refs.input).inputmask('mask',
                {
                    'mask': '7(999) 999-9999',
                    'onKeyDown': function( event){
                        setTimeout(function(){
                            that.onInput(event);
                        },0);
                    }
                }
            );
        },
        beforeDestroy: function() {
            $(this.$refs.input).inputmask('unmaskedvalue');
        },        
    }
);

Переносим созданный файл в шаблон сайта в директорию {путь до шаблона сайта}/js/vue/ и подключаем в шапке сайта (*файл header.php*) например так

$Asset = \Bitrix\Main\Page\Asset::getInstance();
$Asset->addJs(SITE_TEMPLATE_PATH . '/js/vue/bxmaker.authuserphone.js');

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

2021-11-23_16-22_1.png