Покажите хорошую маску для ввода номера телефона?

Question

[nevesomostjke]

Всем прив
Ищу нормальную маску для ввода номера телефона
Вот нашел, что-то более менее:

<script>window.onload=function(){
										document.getElementById('her').addEventListener('input', function (e) {
										var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
										e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
										});
									}
									</script>

Вроде неплохо.
Но тут проблема. Человек может начать вводить номер с цифры 8 или 7 и получится на выходе +77 или +78
Еще я пробовал https://imask.js.org/ но там нету готовых методов именно того, что мне нужно
Как удалять 7 и 8, подскажите пожалуйста?
Я очень слаб в JS, а подтягивать навыки времени сейчас нет
Еще бы было круто, добавлять +7 в поле когда человек начинает вводить номер

Comments

[Rsa97]

+78 - вполне нормальное начало для российского междугороднего номера.

[nevesomostjke]

Rsa97, Мы работаем в основном в дальневосточном направлении
и тут номера в основном +7 924 или +7 908

[Rsa97]

nevesomostjke, +79 - это сотовые. А +78 - стационарные междугородние.
https://ru.wikipedia.org/wiki/%D0%A2%D0%B5%D0%BB%D...

[nevesomostjke]

Rsa97, я не планировал отправлять SMS на стационарные междугородние) Все в порядке)

Answer 1

[nevesomostjke]

Нашел более менее нормальный вариант

<script>document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector(".maskphone");
  
  input.addEventListener("input", mask);
  input.addEventListener("focus", mask);
  input.addEventListener("blur", mask);
  
  /***/
  function mask(event) {
    var blank = "+_ (___) ___-__-__";
    
    var i = 0;
    var val = this.value.replace(/\D/g, "").replace(/^8/, "7"); // <---
    
    this.value = blank.replace(/./g, function(char) {
      if (/[_\d]/.test(char) && i < val.length) return val.charAt(i++);
      
      return i >= val.length ? "" : char;
    });
    
    if (event.type == "blur") {
      if (this.value.length == 2) this.value = "";
    } else {
      setCursorPosition(this, this.value.length);
    }
  };
  
  /***/
  function setCursorPosition(elem, pos) {
    elem.focus();
    
    if (elem.setSelectionRange) {    
      elem.setSelectionRange(pos, pos);
      return;
    }
    
    if (elem.createTextRange) {    
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd("character", pos);
      range.moveStart("character", pos);
      range.select();      
      return;
    }
  }
});
									</script>
									<input class="maskphone">

Answer 2

[DanielTonne]

const addInputMaskPhone = () => {
  $(document)
    .on('input', '.js-input-phone', maskPhone)
    .on('focus', '.js-input-phone', maskPhone)
    .on('blur', '.js-input-phone', maskPhone)
    .on('keydown', '.js-input-phone', maskPhone)
}

let keyCode

function maskPhone(event) {
  event.keyCode && (keyCode = event.keyCode)

  var pos = this.selectionStart
  if (pos < 3) event.preventDefault()

  const matrix = '+7 (___) ___-__-__'
  let i = 0
  const def = matrix.replace(/\D/g, '')
  const val = this.value.replace(/\D/g, '')

  let newValue = matrix.replace(/[_\d]/g, function (a) {
    return i < val.length ? val.charAt(i++) || def.charAt(i) : a
  })

  i = newValue.indexOf('_')
  if (i !== -1) {
    i < 5 && (i = 3)
    newValue = newValue.slice(0, i)
  }

  var reg = matrix
    .substr(0, this.value.length)
    .replace(/_+/g, function (a) {
      return '\\d{1,' + a.length + '}'
    })
    .replace(/[+()]/g, '\\$&')

  reg = new RegExp('^' + reg + '$')

  if (
    !reg.test(this.value) ||
    this.value.length < 5 ||
    (keyCode > 47 && keyCode < 58)
  )
    this.value = newValue

  if (event.type === 'focusout' && this.value.length < 18) this.value = ''
}

addInputMaskPhone()