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