Как после сабмита очистить поле type="tel" и показать очищенную маску?

Question

[Влад]

В начале кода сразу создаю маску:

const maskOptions = {
    mask: "[phone]",
    startsWith: "7",
    lazy: false,
    country: "Russia",
 };
 const mask = IMask(orderFormPhone, maskOptions);

После сабмита я делаю очистку формы (лишнее убрал) так:

function cleanForm() {
    orderFormPhone.value = "+7 (___) ___-__-__";
    mask.updateValue();
 }

1) В этом случае в телефонном поле при первом клике сначала просто появляется значение +7 (___) ___-__-__ и только, после повторного клика активизируется маска телефона и необходимый форус по маске.
2) Если прописать orderFormPhone.value = "";, то поле после сабмита будет пустым и снова после повторного клика активируется маска.
3) А если убрать orderFormPhone.value = "";, то поле и вовсе не очищается.

Всё это касается и инициализации пустого IMask-поля при повторном заходе, если пользователь не нажимал на отправку, и очистки данных, которые сохранил браузер в этом случае.

Я пока остановился на первом варианте с повторным кликом.

Но как избавиться от повторного клика?
Хочу, чтобы маска стала активной сразу при первом клике.

Comments

[szQocks]

не работает адекватно этот imask, ищи другие варианты

[Froggyweb]

не value, а placeholder="+7 (___) ___-__-__" inputu

[Froggyweb]

szQocks, работает за...сь.

[szQocks]

Froggyweb, ну это как вариант, но сама опция lazy: false не работает в этой imask ( точнее работает криво )

[Влад]

Короче, переработал я )
Сейчас прогулялся и на свежую голову за 5 минут сразу же ошибку нашёл.
Тему грохну потом ))

У меня там отдельным слоем динамический плейсхолдер ещё размещён в инпуте:

<form class="order-form order__form">
           <!-- ... -->
            <div class="order-form__phone-wrp">
                <input class="order-form__phone" type="tel" name="phone" value="" placeholder="" />
                <span class="order-form__phone-placeholder">Контактный телефон</span>
                <span class="order-form__phone-error"><img class="order-form__phone-error-img" src="/img/contacts/exclamation.svg" alt=""></span>
            </div>
            <!-- ... -->
        </form>

Нужно было просто прописать:

const orderFormPhone     = document.querySelector(".order-form__phone");
   const phonePlaceholder   = document.querySelector(".order-form__phone-placeholder");   

   phonePlaceholder.addEventListener("click", (e) => {
      e.target.classList.add("move-up");
      orderFormPhone.focus();
  });

..и все дела
перерабатывать нельзя ;)