Как заставить одно из условий обработчика addEventListener() из js сработать только один раз?

Question

уважаемые эксперты!

Пишу обработчик для формы обратной связи . Он должен на ходу производить различные манипуляции с вводимой пользователем строкой. Если сработало последнее условие, то к +7 добавляется 8. По нажатию кнопки 8 удаляется, если она не была нужна, но вот если начать удалять в окне input введенные туда цифры, то 8 добавится опять. Единожды. То есть, это не зацикленность.. Я попробовал приделать костыль в виде переменной, которая позволяет условию сработать один раз. Так код не работает. Возможно, это связано с какими-то свойствами eventов js. Подскажите, пожалуйста, как сделать так, чтобы последнее цифры могли появиться лишь один раз при достижении условия? Сам java script совсем не знаю(

<script>
   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)}`;
          }
            
          else if (currentElement.value.length === 10 && currentElement.value[0] !== '8' && currentElement.value[0] !== '+') {
              currentElement.value = `+7${currentElement.value.substring(0)}`;
          }
         let onetime = false;
            if (!onetime && currentElement.value.length === 11 && currentElement.value[0] == '+' && currentElement.value[2] !== '8') {
              currentElement.value = `+78${currentElement.value.substring(2)}`;
                onetime = true;
            }
            
        })
      }
    })
</script>

Answer 1

Переменная должна быть объявлена снаружи обработчика, так как локальная переменная внутри обработчика инициализируется каждый раз.

let onetime = false;
input.addEventListener('input', (event) => {
  ...
  if (!onetime && currentElement.value.length === 11 && currentElement.value[0] == '+' && currentElement.value[2] !== '8') {
    currentElement.value = `+78${currentElement.value.substring(2)}`;
    onetime = true;
  }
})

Answer 2

Свободный пересказ вашей функции:

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

  if (!input) return; // Нет input - прервать функцию. Избавит от лишней вложенности {}.

  input.addEventListener("input", function() {
    const val = this.value;

    if (val[0] == '8') {
      this.value = `+7${ val.slice(1) }`;
    } else if (val.length == 10 && val[0] != '8' && val[0] != '+') {
      this.value = `+7${ val }`;
    }
  });

  input.addEventListener("input", function _only_once() {
    const val = this.value;

    if (val.length == 11 && val[0] == '+') {
      this.value = `+78${ val.slice(2) }`;
    }

    this.removeEventListener("input", _only_once); // с первого раза удалит самого себя.
  });
});

Внутри функции ключевое слово this (которого нет у стрелочных функций) ссылается на объект, в контексте которого вызывается функция. В этом случае, это сам input. Поэтому использован this вместо event.currentTarget

БЛОГ НА HUSL

Как заставить одно из условий обработчика addEventListener() из js сработать только один раз?

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