Cet article décrit la méthode d'affichage automatique de la liste des suffixes de la boîte aux lettres en entrant un nom d'utilisateur par JS. Partagez-le pour votre référence. Les détails sont les suivants:
Ce qui suit est le code, enregistrez-le dans le fichier html à ouvrir:
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Entrez le nom d'utilisateur pour afficher automatiquement la liste des suffixes de la boîte aux lettres </Title>
<script type = "text / javascript" src = "jQuery / jQuery-1.10.2.min.js"> </ script>
<style>
* {marge: 0; rembourrage: 0;}
ul, li {list-style: aucun;}
.InPulelem {largeur: 198px; hauteur: 22px; line-height: 22px; bordure: 1px solide # ff4455;}
.parentcls {largeur: 200px;}
.Auto-tip li {largeur: 100%; hauteur: 22px; line-height: 22px; fonte-size: 14px;}
.auto-tip li.hoverbg {fond: #ddd; curseur: pointeur;}
.red {couleur: rouge;}
.Hidden {affichage: aucun;}
</ style>
<script type = "text / javascript" src = "js / e-mailAutocomplete.js"> </ script>
</ head>
<body>
<div>
Veuillez saisir le nom d'utilisateur des e-mails ci-dessous:
<div>
<input type = "text">
</div>
</div>
</docy>
</html>
Le principe est: lorsque j'entre n'importe quel mot, l'invite de messagerie correspondante sera automatiquement abaissée. Lorsque j'entre 11 dans la zone d'entrée, la boîte déroulante verra les 11 e-mails entrés. Lorsque j'entre d'autres e-mails, il y aura d'autres e-mails correspondant à d'autres copies.
De même, ce plug-in ne nécessite pas de balises HTML. Il ne nécessite qu'une boîte d'entrée pour avoir le nom de classe de classe correspondant, ce qui est OK. Le parent a un nom de classe de classe et rien d'autre n'est nécessaire. Le code HTML interne est généré automatiquement.
Le code HTML est le suivant:
Copiez le code comme suit: <div>
<input type = "text">
</div>
En fait, les balises Div ci-dessus n'ont pas besoin d'ajouter une classe comme ci-dessus à la zone d'entrée d'entrée et à l'élément parent (la personnalisation est également possible, mais lorsque l'initialisation de JS, il est OK. Par défaut, la classe parent est appelée parentCls, la classe de boîte d'entrée actuelle est appelée l'objet INPUTELM, et la classe de champ masculée est appelée HiddenCls. Vous pouvez initialiser directement l'objet vide lors de l'initialisation!). Étant donné qu'il peut y avoir plusieurs boîtes d'entrée sur la page, une classe parent est nécessaire pour distinguer la boîte d'entrée, et bien sûr, une valeur de stockage de domaine cachée est nécessaire pour l'arrière-plan de développement.
Il y a un paramètre de tableau de messagerie mailarr dans l'élément de configuration: ["@ qq.com", "@ qq2.com", "@ gmail.com", "@ 126.com", "@ 163.com", "@ hotmail.com", "@ yahoo.com", "@ yahoo.com" .cn "," @ live.com "," @ sohu.com "," @ sina.com "]. Boîtes aux lettres.
Les fonctions implémentées sont les suivantes:
1. Prend en charge l'opération de haut et de bas du clavier et prend en charge le clic de la souris et appuyez sur Entrée.
2. Lorsque vous cliquez sur le document, la boîte déroulante est masquée à l'exception de la case d'entrée actuelle. Lorsque les entrées sont suivies, la correspondance automatique et d'autres opérations sont implémentées.
Sans parler des détails, il est similaire à la fonction d'invite de messagerie automatique lors de l'inscription en ligne. S'il y a des bugs, vous pouvez me laisser un message, donc je ne vais pas entrer dans les détails!
Le code CSS est le suivant:
Copiez le code comme suit: <style>
* {marge: 0; rembourrage: 0;}
ul, li {list-style: aucun;}
.InPulelem {largeur: 198px; hauteur: 22px; line-height: 22px; bordure: 1px solide # ff4455;}
.parentcls {largeur: 200px;}
.Auto-tip li {largeur: 100%; hauteur: 22px; line-height: 22px; fonte-size: 14px;}
.auto-tip li.hoverbg {fond: #ddd; curseur: pointeur;}
.red {couleur: rouge;}
.Hidden {affichage: aucun;}
</ style>
Cliquez ici pour télécharger le code EMAILAutoComplete.js.
J'espère que cet article sera utile à la programmation JavaScript de tous.