Задать вопрос
@MrMaTpOcKuH

Как добавить удаление из маски номера первой 8?

В данном коде (используется для создания маски телефона на сайте), не могу понять как устранить один недостаток, при автозаполнении первая восьмерка не удаляется, а становится сразу за 7, что естественно приводит к не корректной отправке номера.
Заранее благодарю за помощь.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/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>
  • Вопрос задан
  • 121 просмотр
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы