Дополнительная проверка в маске телефона на семерку
 

Здравствуйте.

Текущий код в целом устраивает и работает корректно, но хотелось бы немного его облагородить, добавив дополнительную проверку на цифру 7 вначале строки. Т.е. если 7, то «+» перед ней, если другие, то ничего.

Также напрягает отсутствие возможности заменять выделение простым нажатием цифр. Сейчас только стирать и потом вводить заново.

<input type="tel" name="phone" placeholder="Контактный телефон" class="i_phone">
<script>
var phoneInput = document.querySelectorAll(".i_phone");
for(var i=0; i < phoneInput.length; i++){
phoneInput[i].addEventListener("keydown", function(e) {
  "ArrowLeft" != e.key && "ArrowRight" != e.key && "Backspace" != e.key && "Delete" != e.key && "Tab" != e.key && e.preventDefault();
  var t = "+1 (111) 111-11-11";
  if (/[0-9\+\ \-\(\)]/.test(e.key)) {
    var a = this.value,
      n = a.length;
     if(n>0 && e.key=='+');
     
    else if (/[0-9+]/.test(e.key)){
      if ("1" == t[n]) 
        this.value = a + e.key;
      else if ("+" == t[n]) 
        {
            this.value = a + e.key;      
        }
      else if ("+" != t[n]) 
      {
      
          for (var r = n; r < t.length; r++) {
            if ("1" == t[r]) {
              this.value = a + e.key;
              break
            }
            a += t[r]
          }
       }
       
      if(this.value.length==1 && this.value!="+")
      {
        this.value="+"+this.value;
      }
    }   
  }
});
}
</script>

Буду благодарен за любую помощь в решении вопроса)

TrueLie,

1) заменить событие "keydown" на событие "input", чтобы всякие там вставки из буфера работали, и вообще.

2) для работы с выделенным куском текста курить https://learn.javascript.ru/selection-range или что-то вроде того
запоминать текущее выделение, потом возвращать, там несколько кейсов.

3) c +7 даже не знаю что сказать. Учитывая, что пп 1 и 2 предполагают рефакторинг с ног на голову, +7 пока вообще не на чем делать


----
в целом, лучше либо взять готовый компонент, либо посмотреть как там устроен обработчик "input"

Alexandroppolus,

спасибо за ответ.

1. Вставки не нужны.
2. Спасибо, изучаю.
3. А жаль, это самое важное, что хотелось бы)

TrueLie,
на всякий случай https://javascript.ru/forum/dom-wind...tml#post421348