Как установить курсор в начале маски при переключении табами?

Question

В форме в поле телефона использую маску на базе библиотеки Imask.

Пытаюсь сделать так, чтобы при фокусе как мышью, так и табом по полю появлялась полная маска со скобками, причём курсор устанавливался в начальную позицию ввода. Есть здесь проблема: или появляется неполная маска, только +38 или по табу на поле курсор смещается вконец
Не получается очистить поле телефона после отправки формы, получаю

Warring: Element value was changed outside of mask. Syncronize mask using mask.updateValue() to work properly.

const phone = document.querySelector('.phone');
const name = document.querySelector('.name');

if (phone) {
  phone.onfocus = () => {
    newIMask(phone)
  }
}

function newIMask(phone) {
  let phoneMask = IMask(
    phone, {
      mask: '{+38} (000) 000-00-00',
      lazy: false
    });
  phone.value = phoneMask.unmaskedValue; //если закомментировать, то по табу курсор сместиться вконец
}

document.getElementById("form").addEventListener('submit', function(e) {
  e.preventDefault();
  phone.value = "";
  window.open('mailto:[email protected]?name=' + name.value + '&body=' + phone.value);
});

<script src="https://unpkg.com/imask"></script>
<form id="form">
  <input type="text" name="name" class="name">
  <input type="tel" name="phone" class="phone">
  <input type="submit" value="Отправить">
  <form>

Получаю такое уведомление:

Element value was changed outside of mask. Syncronize mask using mask.updateValue() to work properly.

Answer 1

Вот такой вставкой я вроде как решаю вопрос с табом

const form = document.querySelector('#form');
    form.addEventListener('keydown', function (e) {
      if(e.key == 'Tab') {
        if(phone.value === '') {
          let tabMask = IMask(
            phone, {
              mask: '+38( 000) 000-00-00',
              lazy: false
          });
        }
      }
    });

, но при вводе каждой цифры остаётся

Warring: Element value was changed outside of mask. Syncronize mask using mask.updateValue() to work properly.

и поле телефона не очищается при отправке

const phone = document.querySelector('.phone');
const name = document.querySelector('.name');
const form = document.querySelector('#form');

if (phone) {
  phone.onfocus = () => {
    newIMask(phone)
  }

  form.addEventListener('keydown', function(e) {
    if (e.key == 'Tab') {
      if (phone.value === '') {
        let tabMask = IMask(
          phone, {
            mask: '+38( 000) 000-00-00',
            lazy: false
          });
      }
    }
  });
}

function newIMask(phone) {
  let phoneMask = IMask(
    phone, {
      mask: '{+38} (000) 000-00-00',
      lazy: false
    });
  phone.value = phoneMask.unmaskedValue; //если закомментировать, то по табу курсор сместиться вконец
}

document.getElementById("form").addEventListener('submit', function(e) {
  e.preventDefault();
  phone.value = "";
  window.open('mailto:[email protected]?name=' + name.value + '&body=' + phone.value);
});

<script src="https://unpkg.com/imask"></script>
<form id="form">
  <input type="text" name="name" class="name">
  <input type="tel" name="phone" class="phone">
  <input type="submit" value="Отправить">
  <form>

Answer 2

Я использовал phoneMask.alignCursor() чтоб установить курсор в "начало" маски. Так же просто задал phoneMask.value = "" чтоб избежать сообщения об ошибке. Похоже, что всё работает как надо.

const form = document.querySelector("#form");
const nameInput = document.querySelector(".name");
const phoneInput = document.querySelector(".phone");

// Инициализируем iMask только один раз
const phoneMask = IMask(phoneInput, {
  mask: "{+38}` (000) 000-00-00",
  lazy: false,
});
phoneInput.addEventListener("focus", () => {
  // При фокусе выравниваем курсор
  phoneMask.alignCursor();
});

form.addEventListener("submit", event => {
  event.preventDefault();

  // Сначала используем значения
  window.open("mailto:[email protected]?name=" + nameInput.value + "&body=" + phoneInput.value);
  // И уже потом очищаем их
  nameInput.value = "";
  phoneInput.value = "";
  phoneMask.value = "";
});

<script src="https://unpkg.com/imask"></script>
<form id="form">
  <input type="text" name="name" class="name">
  <input type="tel" name="phone" class="phone">
  <input type="submit" value="Отправить">
</form>

БЛОГ НА HUSL

Как установить курсор в начале маски при переключении табами?

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