В этой статье вы узнаете, как вы можете реализовать интересную вещь, как маскирование электронной почты. Где требование идут небольшие, что безусловно нужно соблюдать, так как мы автоматически выводим почтовый адрес в поле для отправки писем.
- Это для начало Логин почты должен содержать неопределённое количество символов (A-Z,a-z,0-9);
- После @ можно вписать любую почту (mail, gmail, yandex, rambler, корпоративный адрес и т.д.);
- После точки можно вписать любую доменную зону (.ru, .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="inputmask.js"></script>
<script>
$(document).ready(function(){
$("#contactsForm").inputmask("email")
});
</script>
Все готово, где теперь при наведении на поле должна появиться заданная маска.
