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

Важно! Скрипт работает корректно, если выбран тип поля формы "Телефон".

Результат установки необходимо проверять на опубликованной странице.

Стандартная маска

Вариант 1

Перейдите в раздел "Плагины"

Выберите из списка плагин Маска ввода телефона, задайте имя и нажмите Сохранить

Вариант 2

Чтобы добавить скрипт, перейдите в раздел "Плагины"

Выберите плагин Свой код

Код добавляете в поле Код перед \

Код для добавления

<script src="https://f.1.creatium.io/ca/fd/04/07042b70dc72426fb6edbbf2d2d125eff0/jquery_mask_min.js"></script>
<script type="text/javascript">
  jQuery.browser = {};
  (function () {
    jQuery.browser.msie = false
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\\./)) {
      jQuery.browser.msie = true;
      jQuery.browser.version = RegExp.$1
    }
  })();
</script>
<script>
  cr.api(page => {
    const errorTitle = 'Ошибка' /* Заголовок сообщения об ошибке */
    const errorText = 'Неправильно указан номер телефона' /* Текст сообщения об ошибке */
    const characters = 10 /* Минимальное количество цифр в номере телефона */
    const template = '+7 (000) 000-00-00'
    const startContent = '+7'

    $.jMaskGlobals = {}
    $.jMaskGlobals.maskElements = 'input'
    $.jMaskGlobals.translation = {
      "0": { pattern: /\d/ },
      "+": { pattern: /\+/, optional: true }
    }

    page.waitForAppear('[cr-field="phone"]', field => {
      const namePosition = getProp(field.querySelector('.name'), 'position')
      const input = field.querySelector('input')

      if (namePosition == 'static') setMask(input)
      else input.addEventListener('focus', () => setMask(input))

      input.addEventListener('input', () => {
        if (!input.value) return setMask(input)
        input.value = input.value.replace(/(\+7\s?\(?)(\+?7|8)/, '$1')
        setStartContent(input)
      })
    })

    page.on('before-form-submit', event => {
      const apiPhoneFields = event.form.fields.filter(apiField => {
        return apiField.type == 'phone'
      })

      apiPhoneFields.forEach(apiField => {
        const phoneNumber = apiField.value.replace(/\D/g, '')
        if (phoneNumber.length < characters) {
          page.showErrorMessage(errorTitle, errorText)
          event.prevent()
        }
      })
    })

    function setMask(input) {
      if (!input) return
      $(input).mask(template, { selectOnFocus: false })
      setStartContent(input)
    }

    function setStartContent(input) {
      if (!input) return
      const value = input.value ? input.value : ''
      if (!value.startsWith(startContent)) {
        input.value = startContent + value
      }
    }

    function getProp(el, prop) {
      if (!el || !prop) return
      return getComputedStyle(el, null).getPropertyValue(prop)
    }
  })
</script>

Важно! Данная маска создает отдельное поле Телефон, поэтому если вам нужно передавать это поле в интеграцию, используйте передачу через ID поля в редакторе.

Результат можно посмотреть на опубликованной странице, пример: https://examples.creatium.site/mask

Маска с автоматическим выбором страны

Как добавить?

Чтобы добавить скрипт, перейдите в раздел "Плагины"

Выберите плагин “Свой код”

Код добавляете в поле Код перед \

Код для добавления

<link rel="stylesheet" href="https://files2.creatium.io/support-scripts/intl-tel-input/build/css/intlTelInput.css">
<script src="https://files2.creatium.io/support-scripts/intl-tel-input/build/js/intlTelInput.min.js"></script>
<style>
  .iti {
    display: block;
  }
</style>

<script>
cr.api(page => {
  page.waitForAppear('[cr-field="phone"]', field => {

    $('.area .metahtml').css('z-index', 'auto')
    let a = page.getComponent(field.closest(".widget-field"))
    console.log(a)
    let input = field.querySelector("input");

    const iti = intlTelInput(input, {
      loadUtils: () => import("https://files2.creatium.io/support-scripts/intl-tel-input/build/js/utils.js"),
      initialCountry: "auto", // выбор страны автоматический
      geoIpLookup: (success, failure) => {
        fetch("https://ipinfo.io/json")
          .then((res) => res.json())
          .then((data) => success(data.country))
          .catch(() => "ru");
      }, // по ip проверяем страну, если не нашли ставим ru
      strictMode: true, // При вводе пользователем данных игнорировать любые нерелевантные символы. Можно заменить на false
      separateDialCode: true, // Отображает международный код выбранной страны рядом с вводимым номером, чтобы он выглядел как часть набранного номера. меняем на false если нужен ввод руками
      autoPlaceholder: 'polite', // Изменять плейсхолдер на формат выбранной страны         
      countryOrder: ['ru', 'kz', 'us'], // Список кодов стран, которые будут в начале списка
      allowPhonewords: true, // проверка что в номере нет лишних символов
      validationNumberTypes:  [ "FIXED_LINE", "MOBILE", "FIXED_LINE_OR_MOBILE", "TOLL_FREE","PREMIUM_RATE", "SHARED_COST", "VOIP", "PERSONAL_NUMBER","PAGER","UAN","VOICEMAIL","UNKNOWN"]  

    });
    input.setAttribute('pattern', "[0-9]*")
    input.setAttribute('inputmode', "numeric")
   input.addEventListener('input', () => {
     input.value = input.value.replace(/[^0-9]/g, '')
   })

    page.on('before-form-submit', event => {
      const number = iti.getNumber(intlTelInput.utils.numberFormat.E164);
      event.fields.push({
        name: 'Номер телефона',
        value: number,
        // ID для интеграций, не обязательный параметр
        uid: 'phone',
      });

    })
  })
})
</script>

Как у поля номер телефона на мобильных показывать только цифры в клавиатуре?

У поля номер телефона нужно нажать на гаечный ключ - расширения - js и добавить следующий код:

let field = el.querySelector('[cr-field="phone"] input')
field.setAttribute('pattern',"[0-9]*")
field.setAttribute('inputmode',"numeric")