Как затирать цифру 8 при вводе в инпут с маской?

Question

[danilr]

Использую плагин маску для ввода номера телефона https://imask.js.org/guide.html#masked-base
Применяю так -

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[data-role="imask-phone"]').forEach((item) => {
        // item.placeholder = '+7 (___) ___-__-__';
        item.addEventListener('focus', (e)=> {
            if(e.target.value == '') {
                item.value = '+7 ('
                console.log('item.value: ', item.value);
            }
        })
        IMask(item, {
            mask: '+{7} [phone]',
            strict: true,
        });
    })
});

Нужно было чтобы при фокусе на инпут сразу вводилось "+7".
Вот и теперь нужно, чтобы при вводе следующей 8 - он её затирал либо не давал вводить. Пытался через добавления обработчик на инпут затерать 8, но маска тогда с ума сходит и неправильно работает.
В документации написано что можно как-то через регулярку сделать. Помогите пожалуйста, кто в них разбирается?

Comments

[vreitech]

а зачем затирать 8 после +7? код Санкт-Петербурга начинается с 8. клиенты из Питера вам не нужны, я так понял?

[danilr]

vreitech, реально, сотовые [phone] в таком формате. Блин(

Answer 1

[ReaverJS]

Но прям вообще не юзер френдли.

Лучше через dispatch - подстраивать маску под +7 или 8 соответственно.

Comments

[danilr]

ReaverJS Спасибо большое! ТО что искал прям. Ещё можно узнать, а вот как к твоему коду добавить, чтобы при клике(фокусе на поле) сразу подставлялось '+7 (' ?

[ReaverJS]

danilr, знаю только вот такой костыль:

[danilr]

ReaverJS, ну ладно, буду просто при фокусе менять)

[kunjut19]

ReaverJS, не знаю, насколько это принципиально автору поста, но теперь после 7 нельзя ввести 8

[ReaverJS]

kunjut19, так в этом и смысл.

Answer 2

[Илья Лекарев]

Здесь подойдёт использование prepare для трансформации текста перед применением маски. Я в примере отправляю пустую строку, чтобы в поле ввода оказалась и скобочка. Но можно вернуть и 7. Для текущей маски это отличный вариант

IMask(input, {
    mask: '+{7} [phone]',
    prepare: function (appended, masked) {
      if (appended === '8' && masked.value === '') {
        return '';
      }
      return appended;
    },
});