Маска номера телефона битрикс

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

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

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

С версии 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>

Маски для компонентов на 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 = BitrixMainPageAsset::getInstance();
$Asset->addJs(SITE_TEMPLATE_PATH . '/js/bxmaker.authuserphone.js');

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

При помощи inputmask создадим маску для телефона.

Как использовать маску для телефона

На вашем сайте уже должен быть jQuery, чуть ниже подключаем плагин inputmask:

$mask = "+7 (999) 999-99-99";
$("#PHONE").inputmask('mask', {'mask': $mask});
$(document).on("ajaxComplete", function(e){
    $("#PHONE").inputmask('mask', {'mask': $mask});
});

Как форматировать телефон для сайтов на Битриксе

Рассмотрим такой вариант вариант:

BX.addCustomEvent('onAjaxSuccess', function(){
	var $mask = "+7 (999) 999-99-99";
	$('#soa-property-3').inputmask('mask', {'mask': $mask});
});

Этот пример работает в компоненте оформления заказа, причем даже при отправке аякс запроса – а это выбор местоположения, доставки, оплаты, применение промокода.

Ссылка на плагин:
https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js

UPDATE: Также, есть такой вариант

https://github.com/digitalBush/jquery.maskedinput/blob/master/dist/jquery.maskedinput.min.js

$('.js-phone-mask').mask('+7 (999) 999-9999');

Артур Голубев

Готовые решения для 1С-Битрикс

Скачать плагин jQuery maskedInput можно по указанным ниже ссылкам (обычная и сжатая версия):

http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js

http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js

Как обычно все действия я провожу в демо-версии системы «1С-Битрикс» редакции «Стандарт». Во время установки на восьмом шаге при выборе решения – выберите «Демо-сайт для разработчиков».

После установки необходимо переключить немного настроить модуль «Веб-формы» — переключить его в расширенный режим обработки форм. Для этого зайти в Настройки→Настройки модулей→Веб-формы и отключить флажок «Использовать упрощённый режим редактирования форм».

Скачанный плагин нужно разместить в папку шаблона сайта. Я создал папку js в папке шаблона по-умолчанию (/bitrix/templates/.default) и скопировал в нее файл jquery.maskedinput-1.3.min.js.

Итак, переходим к настройке формы. Заходим в Сервисы→Веб-формы→Настройка веб-форм. У формы с именем SIMPLE_FORM_2 есть вопрос №14 (Телефон-PHONE), именно к нему мы и будем подключать плагин jQuery.maskedInput. Перейдем к вопросам формы:
кликнем по количеству вопросов в столбце «Вопросы», выберем нужный вопрос и изменим его параметры. На закладке «Ответ» введем в поле «Параметры» значение PHONE. Обращаю внимание читателя, что эта возможность доступна только в расширенном режиме
редактирования форм.

Сама форма расположена на странице «Обратная связь» с адресом /communication/web-forms/feedback/index.php. Скопируем шаблон компонента bitrix:form.result.new и присвоим ему имя masked.

Далее в папке шаблона masked нужно создать файл result_modfier.php.

PHP

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
	foreach($arResult["QUESTIONS"] as $qkey => $arQuestion){
		if($arQuestion["STRUCTURE"][0]["FIELD_PARAM"] == "PHONE"){
			$html_code = '<input type="text" size="0" value="" name="form_'.$arQuestion["STRUCTURE"][0]["FIELD_TYPE"].'_'.$arQuestion["STRUCTURE"][0]["ID"].'" 
			data-ftype="'.$arQuestion["STRUCTURE"][0]["FIELD_PARAM"].'" />';
            $arResult["QUESTIONS"][$qkey]["HTML_CODE"] = $html_code;
		}
		
	}
?>


После этого в форме у поля «Телефон» появится атрибут data-ftype со значением PHONE. Этот атрибут необходим нам для того, чтобы передать его в коде вызова плагина в качестве параметра. В качестве альтернативы, если вы не хотите

создавать дополнительный атрибут, вы может просто присвоить этому полю какой-нибудь класс. Я не передаю имя поля, потому что хочется сделать код более гибким и применять его неоднократно.
Теперь осталось только подключить jQuery и плагин jQuery.maskedInput. Для этого создадим файл component_epilog.php.
PHP
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
	CJSCore::Init(array("jquery"));
	$APPLICATION->AddHeadString('<script src="/bitrix/templates/.default/js/jquery.maskedinput-1.3.min.js"></script>', true);
?>
<script>
$(function(){
	$('input[data-ftype="PHONE"]').mask('+7 (999) 999-99-99');
});
</script>


В нем помимо подключения плагина мы вызываем его для поля «Телефон» нашей веб-формы.
Если все сделано правильно, то в поле «Телефон» в форме на странице /communication/web-forms/feedback/ можно будет ввести номер телефона по указанной маске. Ничего другого ввести не получится — jQuery.maskedInput не позволит этого сделать.



  


                       
  




В завершении статьи хотелось бы обратить внимание читателя на то, что jQuery.maskedInput работает на стороне клиента. Для большей надежности необходимо проверять полученные данные и на стороне сервера. В случае с полями веб-форм на сайте под управлением

«1С-Битрикс», нужно использовать валидаторы полей, которые доступны в системе. К сожалению, в системе не предусмотрен валидатор для проверки номера телефона. Но это не беда: узнать о том, как создать свой валидатор  можно из документации для разработчиков, представленной на сайте CMS «1С-Битрикс».
 Скачать код шаблона

Большое количество веб-разработчиков в своих проектах используют популярный плагин для jquery mask, который позволяет создавать любые маски для полей форм. Но, к сожалению, данный плагин на Android платформах работает криво и курсор каретки ввода скачет при наборе номера телефона (это то, что чаще всего хотят форматировать). И, как результат, приходится отказываться от использования данного плагина, писать свое, или писать костыли.

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

Битрикс для своих веб-форм на Битрикс24 написал свое решение для форматирования телефонных номеров, но в основную библиотеку особо не стремится добавлять данное расширение, поэтому мы будем внедрять его руками.

Скачайте подготовленный пакет файлов (он собран из скрипта и библиотек json). Если какого-то языка вам не хватает, то придется делать его либо вручную, либо если у вас коробка Битрикс24, то можно посмотреть по пути /bitrix/components/bitrix/crm.webform.fill/templates/.default/base . Возможно тут есть используемый вами язык. По умолчанию штатно есть русский и украинский языки.

Распаковываем архив в нужную директорию проекта, в моем случае это папка local, в котором папка ‘js’. И теперь все это необходимо подключить, в самом верху нашего шаблона компонента, в котором мы хотим использовать маску делаем следующее:

$this->addExternalJs('/local/js/masked/masked.js');
$this->addExternalCss('/local/js/masked/flag.css');

Файл стилей для флагов подключаем, если планируем их использовать.

Далее нам необходимо поправить шаблон вывода полей.

<input id="FAKE_FIELD" name="" placeholder="Номер телефона"/>
<input type="hidden" id="REAL_FIELD" name="phone_number"/>

Обратите внимание на то, что нам потребуется фейковое поле, которое будет выполнять визуальную часть и поле, куда будет записываться реальный результат и впоследствии передаваться при отправке формы.

В конце шаблона добавим сразу:

<script>
    BX.MIT.Mask.init('FAKE_FIELD');
</script>

Куда, соответственно, подставляем id фейкового поля, на которое и будем применять в дальнейшем маску.

Осталось совсем чуть-чуть: написать небольшой метод, который будет инициализировать эту самую маску. Открываем файл script.js шаблона. Если такового нет, то создаем, а в конце файла пишем следующее:

BX.namespace('BX.MIT.Mask');
(function() {
    "use strict";
    BX.MIT.Mask = {
        url : '/local/js/masked/base',
        country: 'ru',
        node : null,
        init: function(node) {
            this.node = BX(node);

            var dataNode = this.node.nextElementSibling;
            new BXMaskedPhone({
                url: this.url,
                country: this.country,
                'maskedInput': {
                    input: this.node,
                    dataInput: dataNode
                },
                //'flagNode': flagNode,
                //'flagSize': 24
            });
        }
    }
})(window);

Где мы и правим URL в соответствии с расположением файлов json. Указываем код страны, в нашем случае — это Россия (ru). Если решаем использовать флаги, то указываем еще узел, в котором будут эти флаги отображаться (flagNode) и размер отображаемых флагов (flagSize), которые могут быть 16, 24 и 32 пикселя по краям.

На этом, собственно, и все. Если у вас что-то не получилось, то можете обратиться в нашу мастерскую и наши специалисты все сделают.

Валидация ввода – это комплекс мер по пресечению ввода неправильной информации в интерактивной форме (например, в формах обратной связи). Существует для того, чтобы клиент вводил точные данные, например, корректно вводил номер телефона (лишь цифрами и в определенном формате).

Пример валидации в форме «Заказать звонок»

Настройка валидации ввода позволяет задавать для форм обратной связи такие параметры, как маска валидации, формат ввода телефонных номеров, вывод капчи в формах для защиты от спама, формат даты.  

«Использовать капчу в формах» (1).

Captcha (или капча) – это автоматически появляющийся текст, который необходимо ввести пользователю в специальное окно. Используется для защиты от автозаполнения форм.

Внимание! Активация механизма CAPTCHA резко снижает конверсию форм, мы не рекомендуем включать данный параметр без необходимости.

Поле «Маска телефона» (2) позволяет задать формат ввода номера телефона в формах обратной связи. Рекомендуемые параметры:

• Для России, Казахстана — +7 (999) 999-99-99
• Для Украины: +380 99 999 9999

Как заменить маску телефона для других стран читайте здесь.

«Маска телефона для валидации» (3) позволяет задать регулярное выражение для проверки корректности ввода номера телефона в формах обратной связи.

Внимание! Маска телефона должна соответствовать маске телефона для валидации, иначе пользователь не сможет заполнить форму обратной связи.

Пример маски телефона для валидации:

• Для России и Казахстана: ^[+][0-9] [(][0-9]{3}[)] [0-9]{3}[-][0-9]{2}[-][0-9]{2}$
• Для Украины: ^[+][0-9]{3} [0-9]{2} [0-9]{3} [0-9]{4}$

«Формат даты» (4) позволяет определить корректность ввода даты в формах обратной связи. Опция работает в браузерах, не поддерживающих HTML5 input[type=date], например Firefox, для остальных браузеров формат даты в этом поле зависит от локализации браузера.

Настройка «Возможных расширений файлов для валидации»(5) позволяет указать разрешенные для загрузки документы через формы обратной связи. Необходимо указать все расширения через вертикальный разделитель.

Например, значения по умолчанию: png|jpg|jpeg|gif|doc|docx|xls|xlsx|txt|pdf|odt|rtf

Если имя файла имеет расширение в верхнем регистре, 1С-Битрикс может не разрешить его загрузку, поэтому рекомендуется использовать расширения файлов в нижнем регистре.

0