Как сделать правильную маску Masked Input для ввода email?

Question

[Александр]

Использую Masked Input.
Нужно сделать маску типа "мойЛогин@gmail.com"

jQuery(function($){
   $("#mail").mask("[e-mail]");
});

Проблема 1
мойЛогин - может содержать неопределённое количество символов (A-Z,a-z,0-9)

Проблема 2
В слове "gmail" Masked Input автоматически предлагает вместо буквы "а" ввести букву.

Comments

[juuuk2]

экранируй "gm\\аil"

[Игорь Васильев]

Каким фреймворком пользуетесь??

на Yii2 можно вот так:

<?= $form->field($model, 'email')->widget(MaskedInput::className(), ['clientOptions' => ['alias' => 'email'],])->textInput(['placeholder' => 'Ваш E-mail'])->label(false);?>

Answer 1

[asand]

Для маски "имя@gmail.com" используйте что-то вроде:

$("input#email").inputmask({
            mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
            greedy: false,
            clearMaskOnLostFocus: false,
            onBeforeWrite: function (event, buffer, caretPos, opts) {
                buffer.forEach(function(item, i, buffer) {
                    if (item == '@') {
                        buffer[i+1] = 'g';
                        buffer[i+2] = 'm';
                        buffer[i+3] = 'a';
                        buffer[i+4] = 'i';
                        buffer[i+5] = 'l';
                        buffer[i+6] = '.';
                        buffer[i+7] = 'c';
                        buffer[i+8] = 'o';
                        buffer[i+9] = 'm';
                        buffer.length = i+10;
                    }
                });
            }
        });

Answer 2

[blolg]

jquery.inputmask позволяет сделать нечто подобное.

//email mask
  $(selector).inputmask({
    mask: "*{1,20}[.*{1,20}][.*{1,20}][.*{1,20}]@*{1,20}[.*{2,6}][.*{1,2}]",
    greedy: false,
    onBeforePaste: function (pastedValue, opts) {
      pastedValue = pastedValue.toLowerCase();
      return pastedValue.replace("mailto:", "");
    },
    definitions: {
      '*': {
        validator: "[0-9A-Za-z!#$%&'*+/=?^_`{|}~\-]",
        cardinality: 1,
        casing: "lower"
      }
    }
  });

Однако 2-ю проблему по-моему он тоже не решает.