Как сделать так, чтобы результаты срабатывания if в addEventListener () отменялось действиями более позднего if?

Question

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

В рамках подключения addEvent Listener () следует серия условий, регулирующих формат номера телефона. На 11 символе ввода "+7" должно меняться на "+78", а на 12 наоборот - "+78" нужно менять на "+7". Если просто ввод достиг 12 символов и есть специальное условие:

currentElement.value = currentElement.value.replace("+78", "+7");

то восьмерка никуда не девается.. Насколько я понимаю, потому, что "currentElement.value.length == 11" уже не TRUE, но он однократно выполнился. Подскажите, как решить задачу, собственные усилия не дали результатов.. (

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

    if (input) {
      let onetime = false;
      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)}`;
        }

        if (!onetime && currentElement.value.length == 11 && currentElement.value[0] == '+' && currentElement.value[2] !== '8') {
          currentElement.value = `+78${currentElement.value.substring(2)}`;
          onetime = true;
        }
      })

      input.addEventListener('input', (event) => {
        const currentElement = event.currentTarget;
        if (currentElement.value.length === 12 && currentElement.value[0] === '+') {
          currentElement.value = currentElement.value.replace("+78", "+7");
        }
      })
    }
  })
</script>

Answer 1

Зачем Вам два обработчика одного и того же события на одном и том же элементе?

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

    if (input) {
      let onetime = false;
      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)}`;
        }

        if (!onetime && currentElement.value.length == 11 && currentElement.value[0] == '+' && currentElement.value[2] !== '8') {
          currentElement.value = `+78${currentElement.value.substring(2)}`;
          onetime = true;
        } else if (currentElement.value.length === 12 && currentElement.value[0] === '+') {
          currentElement.value = currentElement.value.replace("+78", "+7");
        }
      })
    }
  })
</script>

Answer 2

Можно сделать с помощью регулярных выражений.

Проверяем есть ли +7 и добавляем, если нет.
Проверяем длину на 11 и отсутствие 8, заменяем, если условие истинно.
Проверяем длину на 12 и больше и наличие +78, удаляем 8, если условие истинно.

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

if (input) {
    input.addEventListener("input", event => {
        const tag = event.currentTarget;
        tag.value = tag.value.replace(/(?:(?:\+7?)|7)?(.*)/, "+7$1");
        const elevenPattern = new RegExp("(\\+7)([^8]\\d{8})$");
        const twelvePattern = new RegExp("(\\+7)8(\\d{8})");
        if (elevenPattern.test(tag.value)) {
            tag.value = tag.value.replace(elevenPattern, "$18$2");
        } else if (twelvePattern.test(tag.value)) {
            tag.value = tag.value.replace(twelvePattern, "$1$2");
        }
    })
}
});

<input type="text" id="telefon">

БЛОГ НА HUSL

Как сделать так, чтобы результаты срабатывания if в addEventListener () отменялось действиями более позднего if?

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