Любой символ в маске ввода номера, как сделать?

Question

[mechmedia]

Использую плагин ввода номера jQuery Masked Input Plugin.
Как сделать, чтобы можно было в начале вводить любой первый символ?
А если конкретнее, то "+" или любую цифру.
Сейчас у меня так:

$("input[name=phone]").mask("99999999999");

Но нужно, чтобы в начале была возможность написать символ плюс "+".

Answer 1

[Данила]

Да просто доработайте маску и всё:

$("input[name=phone]").mask("+?99999999999");

Если прям хотите изощриться, то можно использовать более сложный шаблон:

$("input[name=phone]").mask("A9999999999", {
  translation: {
    'A': { pattern: /[0-9+]/ }
  }
});

Comments

[mechmedia]

Спасибо, сделал!
Только переписал немного, согласно документации:

$.mask.definitions['A'] = "[0-9+]";
$("input[name=phone]").mask("A99999999999");

Answer 2

[ksnk]

В этой самой маске столько косяков и мелей, что сразу может и крыша поехать. У меня сейчас вот такое чудище стоит

$("input[type='tel']").each(function(){
                if(!this.inputmask) { // ставили уже ?
                    let mask="[phone][999]"; // 6 - 3-я 9-ка, 9-4-z 9-rf, 10-5.
                    function oninput(){
                        const wphoneValue = jQuery(this).val().replace(/\D/g, '');

                        if (wphoneValue.length >= 4) {
                            const firstThreeDigits = parseInt(wphoneValue.substring(1, 4));
                            if(firstThreeDigits>699 && firstThreeDigits<900 && firstThreeDigits!==812){
                                // remove first letter from value
                                jQuery(this).val(jQuery(this).val().replace(/\+7 \([78]/,'+7 ('));
                                let pos=0;
                                for(let x=wphoneValue.length;x>1;x--){
                                    pos=mask.indexOf('9', pos+1);
                                }
                                this.setSelectionRange && this.setSelectionRange(pos,pos,"forward");
                            }
                        }
                    }
                    $(this).on('input', oninput)
                        .inputmask({
                        "mask": mask,
                        skipOptionalPartCharacter: " ",
                        placeholder: "_",
                        autoclear: false,
                        onBeforePaste: function (pastedValue, opts) {
                            pastedValue = pastedValue.toLowerCase().replace(/\D/g, '').replace(/7(\d{10})/, '$1').replace(/8(\d{10})/, '$1');
                            return pastedValue;
                        }
                    })
                    var that=this;
                    setTimeout(function(){oninput.call(that)},10);
                }
            })

Пояснения:

• input[type='tel'] - < input type="tel" ... вместо text позволит автоматически использовать мобильным броузерам телефоны и вставлять кнопки "позвонить". Это удобно. Да и вдруг еще где приспичит маску телефона поставить...
  
• В хвосте маски вставлены еще возможные цифры, это про запас... Вдруг кто-то вставит код не для России, будет обидно потерять последние цифры вместе с клиентом. Хотя это, наверное, рудимент для таких случаев. Такие номера все равно придется вручную проверять, если клиента потерять таки действительно жалко.
  
• onBeforePaste предназначена для Cut&paste в маску всяких красиво отформатированных телефонов, со скобками и дефисами в странных местах, возможно, с ведущей восьмеркой.
  
• oninput позволяет избежать потери последней цифры, если юзер начал набивать номер, клавишами, начиная с 8-ки. Ввод корректируется сам, выкидывая ведущую 8, если он не напоминает код города 812... В соответствии с маской функция выкидывает лишнее и вставляет нужное.
  
• Вызов функции oninput по таймауту позволяет бороться с автозаполнением номеров телефонов, которые броузер запомнил не так, как требуется странице.