Как сделать маску для ввода E-mail типа ▶ [email protected]

Сейчас мы реализуем такую вещь, как маскирование электронной почты.

Требования:

• Логин почты должен содержать неопределённое количество символов (A-Z,a-z,0-9);
• После @ можно вписать любую почту (mail, gmail, yandex, rambler, корпоративный адрес и т.д.);
• После точки можно вписать любую доменную зону (.ru, .com и т.д.).

Наша маска примет такой вид: «мойЛогин@mail.com«

Реализация

Мы воспользуемся библиотекой jquery.inputmask.bundle.js. Скачать скрипт c примером (4 KB)

Вот разметка нашей простой формы, которая состоит из одного поля «Ваш E-mail» и кнопки «Отправить»:

<form>
   <input name="contactsForm" type="text" id="contactsForm" placeholder="Ваш E-mail"/>
   <button type="submit">Отправить</button>
</form>

Под формой подключаем наш скрипт и библиотеку jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://obninsksite.ru/inputmask.js"></script>
<script> 
  $(document).ready(function()&#123;   
    $("#contactsForm").inputmask("email")
  &#125;);
</script>

Готово

Теперь при наведении на поле должна появиться вот такая маска: