ユーザー名入力時にメールサフィックスリストを自動表示するJSメソッド_javascriptスキル

この記事の例では、JSを使用してユーザー名を入力したときにメールサフィックスリストを自動的に表示する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

次はコードです。HTML ファイルに保存して開きます。

コードをコピーします コードは次のとおりです:

<頭>



<スタイル>
*{マージン:0;パディング:0;}
ul,li{リストスタイル:なし;}
.inputElem {幅:198px;高さ:22px;行の高さ:22px;ボーダー:1px 実線 #ff4455;}
.parentCls{幅:200px;}
.auto-tip li{幅:100%;高さ:22px;行の高さ:22px;フォントサイズ:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{color:red;}
.hidden {表示:なし;}

以下にメールのユーザー名を入力してください:

原理は次のとおりです。入力ボックスに任意の単語を入力すると、対応する電子メール プロンプトが自動的にドロップダウンされます。入力ボックスに 11 を入力すると、ドロップダウン ボックスにすべての単語が表示されます。 11 のメール。他の単語を入力すると、該当するメール アドレスが表示されます。

同様に、このプラグインには HTML タグは必要ありません。対応するクラス名を含む入力ボックスのみが必要で、親にはクラス名があり、他には何も必要ありません。内部 HTML コードは自動的に生成されます。

HTML コードは次のとおりです:

コードをコピー コードは次のとおりです:

実際、上記の div タグは必要ありません。入力ボックスと親要素に上記のようにクラスを追加するだけです (カスタマイズすることもでき、JS の初期化中にクラスを渡すだけです。デフォルトでは、親クラスはparentClsと呼ばれ、現在の入力ボックスのクラスはinputElemと呼ばれ、隠しフィールドのクラスはhiddenClsと呼ばれます。単に初期化して、初期化中に空のオブジェクトを直接渡すだけです。ページ上には複数の入力ボックスが存在する可能性があるため、どの入力ボックスであるかを区別するために親クラスが必要になります。もちろん、開発バックエンドに値を保存するには非表示フィールドが必要です。

設定項目にメールボックス配列パラメータ mailArr があります: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com" 、「@hotmail.com」、「@yahoo.com」、「@yahoo.com.cn」、「@live.com」、「@sohu.com」、「@sina.com」]。これは、何を入力しても、非常に多くのデフォルトのメールボックスがあることを示しています。ドロップダウン ボックスが初期化されると、特定の項目を特定するためのプロンプトが表示されます。ドロップダウンボックスの項目。もちろん、要件の変更により、初期化時に必要に応じて電子メール パラメーターを構成できます。

は次の関数を実装します:

1. キーボードの上下移動、マウスのクリックと入力操作をサポートします。

2. ドキュメントをクリックすると、現在の入力ボックスを除いてドロップダウン ボックスが非表示になります。入力を続けると自動マッチングなどが行われます。

詳細については説明しません。オンライン登録時の自動メール プロンプト機能と同じです。バグがある場合はメッセージを残してください。長々と説明する必要はありません。

CSS コードは次のとおりです:

コードをコピー コードは次のとおりです:

emailAutoComplete.js コードはここをクリックしてくださいこのサイトからダウンロードしてください。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。