Skip to content

Instantly share code, notes, and snippets.

@Maxim-Kolmogorov
Last active August 6, 2024 07:37
Show Gist options
  • Save Maxim-Kolmogorov/d867767c976532fea60ee4a1abd725e7 to your computer and use it in GitHub Desktop.
Save Maxim-Kolmogorov/d867767c976532fea60ee4a1abd725e7 to your computer and use it in GitHub Desktop.
Phone mask with Vue.js
import Vue from "vue"
Vue.directive('phone', {
bind(el) {
el.oninput = function(e) {
if (!e.isTrusted) {
return
}
const x = this.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,4})/)
if (!x[2] && x[1] !== '') {
this.value = x[1] === '8' ? x[1] : '8' + x[1]
} else {
this.value = !x[3] ? x[1] + x[2] : x[1] + '(' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '')
}
}
},
})
@Maxim-Kolmogorov
Copy link
Author

Maxim-Kolmogorov commented Jan 31, 2021

Это на случай если происходит событие onpaste и вставляется номер, который начинается с 7/+7.

Vue.directive('phone', {
    bind(el) { 
      function replaceNumberForInput(value) {
        let val = ''
        const x = value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,4})/)

        if (!x[2] && x[1] !== '') {
          val = x[1] === '8' ? x[1] : '8' + x[1]
        } else {
          val = !x[3] ? x[1] + x[2] : x[1] + '(' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '')
        }

        return val
      }

      function replaceNumberForPaste(value) {
        const r = value.replace(/\D/g, '')
        let val = r
        if (val.charAt(0) === '7') {
          val = '8' + val.slice(1)
        }
        return replaceNumberForInput(val)
      }

      el.oninput = function(e) {
        if (!e.isTrusted) {
          return
        }
        this.value = replaceNumberForInput(this.value)
      }

      el.onpaste = function() {
        setTimeout(() => {
          const pasteVal = el.value
          this.value = replaceNumberForPaste(pasteVal)
        })
      }

    }
})

@egoson
Copy link

egoson commented Feb 12, 2021

const x = this.value.replace(/\D/g, '').match(/(\d{0,1})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/) x[1] = '+7' this.value = !x[3] ? x[1] + ' (' + x[2] : x[1] + ' (' + x[2] + ') ' + x[3] + (x[4] ? '-' + x[4] : '') + (x[5] ? '-' + x[5] : '')

+7 (999) 999-99-99 - я думаю в таком виде, мы чаще видим маски

@Siwaaa
Copy link

Siwaaa commented Aug 31, 2022

Чтобы первый символ ввода, отличный от 7 и 8, сразу попадал в input, для маски +7 (999) 999-99-99 вместо x[1] = '+7' можно вставить:

if(x[1] === '7' || x[1] === '8') {
  x[1] = '+7'
} else {
  x[2] = x[1]
  x[1] = '+7'
}

@spokik
Copy link

spokik commented Nov 4, 2022

автозаполнение от браузеров не вызывает onpaste() Я на onchange() повесил, но подозреваю можно все и через oninput() слушать

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment