Сейчас мы реализуем такую вещь, как маскирование электронной почты.
Требования:
- Логин почты должен содержать неопределённое количество символов (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(){ $("#contactsForm").inputmask("email") }); </script>
Готово
Теперь при наведении на поле должна появиться вот такая маска: