按Tab键时如何将光标定位在掩码的开头？

Question

在phone字段的表格中，我使用了基于Imask library的掩码。

我试图在用鼠标或标签在字段上聚焦时，出现一个带括号的完整遮罩，并且光标设置到初始输入位置。这里有一个问题：要么出现不完整的掩码，要么只有+38，要么由于字段禁忌导致光标移动到末尾。
我在提交表单后无法清除 phone 字段，我收到警告：

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>

UPD 通过插入代码，我解决了 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
          });
        }
      }
    });

但每个数字都带有警告：

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

并且发送时phone字段没有清空

你能帮我找到正确的解决方案吗？

Answer 1

出现此警告是因为您需要配置 Imask 并且配置内部具有捕获输入值的函数。

Use prepare (value, masked) option for preprocessing input and commit (value, masked) option for postprocessing after UI is deactivated

为了正确工作，只需使用mask.updateOptions更新选项。

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

  const maskOptions = {
    mask: '',
    lazy: false,
    placeholderChar: '#',
    overwrite: true,
    prepare: value => value, // onChange event
    commit: value => (phone.value = value), // set value to phone number
  };

  // Init IMask
  const mask = IMask(phone, maskOptions);

  if (phone) {
    form.addEventListener('keydown', e => {
      if (e.key == 'Tab') {
        // Update options "mask" after pressed Tab key
        mask.updateOptions({
          mask: '{+38}(000)000-00-00',
        });
      }
    });
  }

  phone.addEventListener('focus', () => {
    // Update options "mask" after focused
    mask.updateOptions({
      mask: '{+38}(000)000-00-00',
    });
  });

  form.addEventListener('submit', e => {
    e.preventDefault();
    console.log('sending phone number ', phone.value);

    // Update options & clear up values after submit form
    mask.updateOptions({
      mask: '',
      commit: (value, masked) => {
        value = '';
        masked._value = '';
      },
    });

    phone.blur();
    name.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键时如何将光标定位在掩码的开头？

How to position the cursor at the beginning of the mask when pushing tab key?

javascript

forms

mask