В этой статье описывается метод автоматического отображения списка суффиксов почтового ящика, введя имя пользователя JS. Поделитесь этим для вашей ссылки. Детали следующие:
Ниже приведен код, сохраните его в файл HTML, чтобы открыть:
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<TILE> Введите имя пользователя, чтобы автоматически отображать список суффиксов почтового ящика </title>
<script type = "text/javascript" src = "jquery/jquery-1.10.2.min.js"> </script>
<style>
*{маржа: 0; падки: 0;}
ul, li {list-style: none;}
.inputelem {ширина: 198px; высота: 22px; линейная-высота: 22px; граница: 1px solid #ff4455;}
.parentCls {ширина: 200px;}
.auto-tip li {ширина: 100%; высота: 22px; линейная-высота: 22px; размер шрифта: 14px;}
.auto-tip li.hoverbg {founale: #ddd; cursor: pointer;}
.red {color: red;}
.hidden {Display: none;}
</style>
<script type = "text/javascript" src = "js/emailautocomplete.js"> </script>
</head>
<тело>
<div>
Пожалуйста, введите имя пользователя электронной почты ниже:
<div>
<input type = "text">
</div>
</div>
</body>
</html>
Принцип: когда я введу любое слово, соответствующая подсказка по электронной почте будет автоматически снято. Когда я введу 11 в поле ввода, в раскрывающемся поле будет введено все 11 электронных писем. Когда я введу другие электронные письма, будут другие электронные письма, соответствующие другой копии.
Точно так же этот плагин не требует каких-либо тегов HTML. Требуется только поле ввода, чтобы иметь соответствующее имя класса класса, которое в порядке. Родитель имеет имя класса класса, и больше ничего не нужно. Внутренний HTML -код генерируется автоматически.
HTML -код выглядит следующим образом:
Скопируйте код следующим образом: <div>
<input type = "text">
</div>
Фактически, приведенным выше тегам DIV не нужно добавлять класс, как указано выше, в поле ввода ввода и родительский элемент (настройка также возможна, но когда инициализация JS он в порядке. По умолчанию родительский класс называется ParentCls, текущий класс ввода называется InputElem, а класс скрытого поля называется Hiddencls. Вы можете непосредственно инициализировать пустой объект при инициализации!). Поскольку на странице может быть несколько входных ящиков, необходим родительский класс, чтобы различить, какой ящик ввода является, и, конечно, для фона разработки необходимы скрытое значение хранилища домена.
В пункте конфигурации есть параметр массива по электронной почте: [«@QQ.com», «@QQ2.com», «@gmail.com», «@126.com», «@163.com», «@hotmail.com», «@yahoo», «@yahoo.com» .cn »,«@live.com »,«@sohu ». Почтовые ящики.
Реализованные функции следующие:
1. Поддерживает операцию клавиатуры вверх и вниз, поддерживает щелчок мыши и нажмите Enter.
2. При нажатии на документ раскрывающийся путь скрыт, за исключением текущего ввода ввода. Когда ввод следует, автоматическое сопоставление и другие операции реализованы.
Не говоря уже о деталях, это похоже на автоматическую функцию по электронной почте при регистрации онлайн. Если есть какие -либо ошибки, вы можете оставить мне сообщение, поэтому я не буду вдаваться в подробности!
Код CSS выглядит следующим образом:
Скопируйте код следующим образом: <style>
*{маржа: 0; падки: 0;}
ul, li {list-style: none;}
.inputelem {ширина: 198px; высота: 22px; линейная-высота: 22px; граница: 1px solid #ff4455;}
.parentCls {ширина: 200px;}
.auto-tip li {ширина: 100%; высота: 22px; линейная-высота: 22px; размер шрифта: 14px;}
.auto-tip li.hoverbg {founale: #ddd; cursor: pointer;}
.red {color: red;}
.hidden {Display: none;}
</style>
Нажмите здесь, чтобы загрузить код emailAutocOflete.js.
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.