• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создаем маску ввода для вывода E-mail в HTML (Маска ввода для HTML элемента input для почтового адреса)
Создаем маску ввода для вывода E-mail в HTML
Kosten
Дата: Понедельник, 2020-05-18, 20:57 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29163
Награды: 62


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

- Это для начало Логин почты должен содержать неопределённое количество символов (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>




Все готово, где теперь при наведении на поле должна появиться заданная маска.
Прикрепления: email-mask.zip(37.7 Kb) · 2196437.png(9.1 Kb) · 0589613.png(8.7 Kb)
Страна: (RU)
-SAM-
Дата: Четверг, 2020-05-21, 21:25 | Сообщение 2
Оффлайн
Друзья сайта
Сообщений:720
Награды: 29


Интересная библиотека, вот еще на этот счёт: Маска ввода номера телефона с помощью jQuery (годное решение, когда нужно сделать ввод телефона или почты).



Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.
Страна: (UA)
Форум » Web-Раздел » Начинающему вебмастеру » Создаем маску ввода для вывода E-mail в HTML (Маска ввода для HTML элемента input для почтового адреса)
  • Страница 1 из 1
  • 1
Поиск: