この記事では、JSによってユーザー名を入力して、メールボックスサフィックスリストを自動的に表示する方法について説明します。参照のためにそれを共有してください。詳細は次のとおりです。
以下はコードです。HTMLファイルに保存して開きます。
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title>ユーザー名を入力して、メールボックスの接尾辞リストを自動的に表示します</title>
<script type = "text/javascript" src = "jquery/jquery-1.10.2.min.js"> </script>
<style>
*{マージン：0;パディング：0;}
ul、li {list-style：none;}
.inputelem {width：198px; height：22px; line-height：22px; border：1px solid＃ff4455;}
.ParentCls {width：200px;}
.auto-tip li {width：100％; height：22px; line-height：22px; font-size：14px;}
.auto-tip li.hoverbg {background：#ddd; cursor：pointer;}
.red {color：red;}
.hidden {展示：なし;}
</style>
<script type = "text/javascript" src = "js/emailautocomplete.js"> </scrip>
</head>
<body>
<div>
以下にメールのユーザー名を入力してください：
<div>
<入力型= "テキスト">
</div>
</div>
</body>
</html>
原則は次のとおりです。単語を入力すると、対応する電子メールプロンプトが自動的に引き下げられます。入力ボックスに11を入力すると、ドロップダウンボックスに11のメールがすべて入力されます。他のメールを入力すると、他のコピーに対応する他のメールがあります。
同様に、このプラグインはHTMLタグを必要としません。対応するクラス名を持つには、入力ボックスが必要です。これは問題ありません。親にはクラスの名前があり、他に何も必要ありません。内部HTMLコードが自動的に生成されます。
HTMLコードは次のとおりです。
次のようにコードをコピーします：<div>
<入力型= "テキスト">
</div>
実際、上記のDivタグは、入力入力ボックスと親要素に上記のようにクラスを追加する必要はありません（カスタマイズも可能ですが、JS初期化も問題ありません。デフォルトでは、親クラスはParentClsと呼ばれ、非表示フィールドクラスはHiddenclsと呼ばれます。ページに複数の入力ボックスがある可能性があるため、入力ボックスを区別するには親クラスが必要であり、もちろん、開発の背景には隠されたドメインストレージ値が必要です。
構成項目には、電子メール配列パラメーターメールがあります：["@qq.com"、 "@qq2.com"、 "@gmail.com"、 "@126.com"、 "@163.com"、 "@hotmail.com"、 "@yahoo.com"、 "@yahoo.com" .cn "、"@live.comメールボックスは、どのドロップダウンボックスで、特定のアイテムに到達するときに非常に多くの電子メールプロンプトがあります。
実装された関数は次のとおりです。
1.キーボードの上下操作をサポートし、マウスのクリックをサポートしてEnterを押します。
2。ドキュメントをクリックすると、現在の入力ボックスを除き、ドロップダウンボックスが隠されています。入力に従うと、自動マッチングおよびその他の操作が実装されます。
詳細は言うまでもありませんが、オンラインで登録する際の自動メールプロンプト機能に似ています。バグがある場合は、メッセージを残すことができますので、詳細は説明しません！
CSSコードは次のとおりです。
次のようにコードをコピーします：<style>
*{マージン：0;パディング：0;}
ul、li {list-style：none;}
.inputelem {width：198px; height：22px; line-height：22px; border：1px solid＃ff4455;}
.ParentCls {width：200px;}
.auto-tip li {width：100％; height：22px; line-height：22px; font-size：14px;}
.auto-tip li.hoverbg {background：#ddd; cursor：pointer;}
.red {color：red;}
.hidden {展示：なし;}
</style>
ここをクリックして、emailautocomplete.jsコードをダウンロードしてください。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。