"Слушатель" java script генерирует события при вводе в форму с клавиатуры, но при копировании из буфера обмена не срабатывает!

Question

Хочу редактировать ввод пользователя прямо во время заполнения формы (номера телефона). 1-я функция сходу меняет любую 8 на +7, а 2-я фиксирует размер строки и меняет +7 на +78, если вводили питерский номер в неполном формате.. При вводе с клавиатуры все работает, а вот когда копируешь из буфера - "восемь" не добавляется.. Почему.. голову сломал.. Извините за глупый вопрос, совсем не разбираюсь в Java Script..

Как программа должна работать: Пользователь вводит номер телефона или копирует из буфера обмена. Вначале первая буква меняет 8 на +7, затем вторая функция узнает о количестве символов и возвращает 8-ку, если вводился питерский номер в неполном формате..

**Разъяснение по формату номеров, который нужно получить:**Необходимо, чтобы при введении с клавиатуры или копировании из буфера обмена любой вид приводился к +7 XXX XX XX, без пробелов, тире и скобок.. Первая функция, которая заменяет восьмерку сразу же нужна, чтобы изменения вносили одновременно с действиями пользователя.. Например, пользователь копирует номер 89065555555, 8 меняется на +7, после этого нужно проверить по количеству цифр не убрана ли 8 зря.. Результаты проверки с помощью console.log:

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('#telefon');

  if (input) {
    input.addEventListener('input', (event) => {
      const currentElement = event.currentTarget;
      if (currentElement.value.length && currentElement.value[0] === '8') {
        currentElement.value = `+7${currentElement.value.substring(1)}`;
      }
    })
  }
})

function addFunction() {
  let x = document.getElementById("telefon").value;
  let c = x.length;
  if (c === 11) {
    k = x.replace("+7", "+78");
    document.getElementById("telefon").value = "".concat(k);
  }

  if (numbers[0] == 8) numbers = numbers.substring(1);
}

<div class="form-group">
  <label for="telefon">Phone</label>
  <input type="tel" class="form-control" id="telefon" value="" oninput="addFunction()">
</div>

Answer 1

Valentin, уверен, что всё это можно было бы уточнить в Вашем прошлом вопросе Как "на лету" перезаписать вводимый в input формы телефон? Требуется "подхватить" ввод, изменить и сразу вставить обратно

Вам необходимо обрабатывать событие input всё же в одной функции, а не дробить обработку события на 2 функции. Пожалуй, в Вашем случае подойдет небольшой фикс:

input.addEventListener('input', (event) => {
    const currentElement = event.currentTarget;
    if (currentElement.value.length && currentElement.value[0] === '8') {
        const cutValue = currentElement.value.length === 10 ? 0 : 1
        currentElement.value = `+7${currentElement.value.substring(cutValue)}`;
    }
})

И функция "addFunction" просто станет не нужна.

Хочу так же отметить, что можно использовать готовые решения для создания маски ввода. Есть и для jquery: https://igorescobar.github.io/jQuery-Mask-Plugin/

Так и нативные варианты: https://imask.js.org/

Answer 2

Паллиатив, но работает.. Функция excludeEight() таки убирает 8, и срабатывает после listener, другое дело, что приходится в input onchange="" добавлять.. программа в этом случае срабатывает даже при копировании из буфера обмена, но не сразу, а когда окно ввода "теряет фокус"

<script>
    
    document.addEventListener('DOMContentLoaded', () => {
      const input = document.querySelector('#addNumber');
    
      if (input) {
        input.addEventListener('input', (event) => {
          const currentElement = event.currentTarget;
          if (currentElement.value.length && currentElement.value[0] === '8') {
            currentElement.value = `+7${currentElement.value.substring(1)}`;
            console.log("hj");
          }
            
          else if (currentElement.value.length === 10 && currentElement.value[0] !== '8' && currentElement.value[0] !== '+') {
              currentElement.value = `+7${currentElement.value.substring(0)}`;
          }
            
            if (currentElement.value.length === 11 && currentElement.value[0] == '+' && currentElement.value[2] !== '8') {
              currentElement.value = `+78${currentElement.value.substring(2)}`;
            }
            
        })
      }
    })
    
    function excludeEight() {
      let x = document.getElementById("addNumber").value;
      let c = x.length;
      if (c > 12) {
        let k = x.replace("+78", "+7");
        document.getElementById("addNumber").value = "".concat(k);
        console.log("lk");
      }
      
    }
    
    </script>

БЛОГ НА HUSL

"Слушатель" java script генерирует события при вводе в форму с клавиатуры, но при копировании из буфера обмена не срабатывает!

Ответы (2 шт):