Маска для номера телефона

Большое количество веб-разработчиков в своих проектах используют популярный плагин для 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 пикселя по краям.

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

Арт-Директор mit
Александр Павлов

Дата: 28.11.2017

Поделитесь статьей со своими друзьями в социальных сетях.


Назад к списку статей


Хочу такое же

*
*

с условием обработки моих персональных данных

* - Поля, обязательные для заполнения