按Tab键聚焦时如何将光标定位在IMask输入掩码的起始位置？

我在表单的手机号输入字段中，使用了基于Imask库实现的输入掩码。

• 我希望实现通过鼠标点击或按Tab键聚焦该输入框时，自动展示带括号的完整掩码，同时光标定位在可输入的起始位置。目前遇到问题：要么只展示不完整的掩码（仅显示+38），要么按Tab聚焦时光标会跳转至输入框末尾。
• 表单提交后我无法清空手机号输入框，还会收到如下警告：

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:mail@example.com?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>

问题更新 #

我新增了如下代码后，Tab键的问题暂时得到了缓解：

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
          });
        }
      }
    });

但现在输入每一位数字都会触发上述警告，且表单提交时手机号字段仍然无法清空。
恳请帮忙提供正确的解决方案，谢谢。

根因说明 #

1. 原有代码在聚焦、按键事件中重复为同一个输入框创建IMask实例，多实例冲突导致输入时触发同步告警
2. 表单提交时直接修改input的value属性，没有同步到IMask实例，所以出现值未清空的问题和告警
3. 光标跳转问题是因为掩码初始化后没有手动指定光标到可输入的起始位置

修复后完整代码 #

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

// 全局只初始化一次掩码实例
if (phone) {
  phoneMask = IMask(phone, {
    mask: '{+38} (000) 000-00-00',
    lazy: false
  });

  // 聚焦时处理光标位置
  phone.addEventListener('focus', () => {
    if (phoneMask.unmaskedValue === '') {
      // 光标定位到括号后第一个可输入位置
      phone.setSelectionRange(5,5);
    }
  })
}

form.addEventListener('submit', function(e) {
  e.preventDefault();
  // 用mask实例的方法清空值，不要直接修改input.value
  phoneMask.value = '';
  window.open('mailto:mail@example.com?name=' + name.value + '&body=' + phoneMask.unmaskedValue);
});

<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>

修复效果 #

1. 鼠标点击、Tab键聚焦输入框时，自动显示完整的+38 (___) ___-__-__掩码，光标自动定位到括号后的输入起始位置
2. 输入过程不会再出现同步告警
3. 表单提交后输入框会正常清空

内容的提问来源于stack exchange，提问作者Вася