JS プロンプト テキスト ボックスの電子メール アドレスの入力
今回は、JS プロンプト テキスト ボックスのメール アドレス補完について説明します。JS プロンプト テキスト ボックスのメール アドレス補完についての 注意事項 について、実際のケースを見てみましょう。
今実現したいのは、NetEase にログインするときの電子メール プロンプト ボックスと同様の効果ですが、ここで少し変更する予定です。つまり、@
を入力すると電子メール プロンプト リストが表示されるようになります。 プロンプトを実装する原則は、定期的なマッチングを使用することです
コードは次のとおりです:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>邮箱补全提示</title>
<style>
ul{padding:0px;margin:0px;}
.login_autoComplete{width:256px;border:1px solid #4190db;position:absolute;background-color:#ffffff;z-index:99;top:109px;left:40px;display:none}
.login_auto_ul em{font-style:normal}
.login_auto_ul li.login_auto_title{font-weight:normal;line-height:30px;}
.login_auto_ul li{line-height:22px;text-indent:5px;font-family:"Arial";cursor:pointer;font-weight:bold;color:#333}
.login_auto_ul li.hover,.login_auto_ul li.curr{color:#ffffff;background-color:#6eb6fe}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
window.email_auto = function(selector){
var elt = $(selector);
var strHtml = '<p class="login_autoComplete" id="login_autoComplete">'+
' <ul class="login_auto_ul">'+
' <li class="login_auto_title">请选择邮箱后缀</li>'+
' <li class="hover" hz="@qq.com"></li>'+
' <li hz="@163.com"></li>'+
' <li hz="@126.com"></li>'+
' <li hz="@yahoo.com"></li>'+
' <li hz="@sina.com"></li>'+
' <li hz="@21cn.com"></li>'+
' </ul>'+
' </p>';
var lc = "#login_autoComplete";
var autoComplete,autoLi;
if($(lc).length==0){
$("body").append(strHtml);
$(lc).data("elt",elt);
autoComplete = $("#login_autoComplete");
autoLi = autoComplete.find("li:not(.login_auto_title)");
autoLi.mouseover(function(){
$(this).siblings().filter(".hover").removeClass("hover");
$(this).addClass("hover");
}).mouseout(function(){
$(this).removeClass("hover");
}).mousedown(function(){
$(lc).data("elt").val($(this).text()).change();
$(this).parent().parent().hide();
});
}else{
$(lc).data("elt",elt);
autoComplete = $("#login_autoComplete");
autoLi = autoComplete.find("li:not(.login_auto_title)");
}
$(lc).css("width",elt.outerWidth()-1);
//用户名补全+翻动
elt.keyup(function(e){
if(/13|38|40|116/.test(e.keyCode) || this.value==''){
return false;
}
var username = this.value;
if(username.indexOf("@")==-1){
autoComplete.hide();
return false;
}
autoLi.each(function(){
this.innerHTML = username.replace(/\@+.*/,"")+$(this).attr("hz");
if(this.innerHTML.indexOf(username)>=0){
$(this).show();
}else{
$(this).hide();
}
}).filter(".hover").removeClass("hover");
autoComplete.show().css({
left : $(this).offset().left,
top : $(this).offset().top + $(this).outerHeight(true) - 1
});
if(autoLi.filter(":visible").length==0){
autoComplete.hide();
}else{
autoLi.filter(":visible").eq(0).addClass("hover");
}
}).change(function(){
$("#login_autoComplete").hide();
}).keydown(function(e){
if(e.keyCode==38){ //上
autoLi.filter(".hover").prev().not(".login_auto_title").addClass("hover").next().removeClass("hover");
}else if(e.keyCode==40){ //下
autoLi.filter(".hover").next().addClass("hover").prev().removeClass("hover");
}else if(e.keyCode==13){ //Enter
autoLi.filter(".hover").mousedown();
}
}).focus(function(){
$("#login_autoComplete").data("elt",$(this));
});
}
$(function(){
email_auto("#xxx");
});
</script>
</head>
<body>
脚本之家测试：邮箱补全提示<br/>
<input type="text" id="xxx" style="width:300px"/>
</body>
</html>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
$.ajax() メソッドでサーバーから json データを取得する方法
getBoundingClientRect の使用法と互換性処理
以上がJS プロンプト テキスト ボックスの電子メール アドレスの入力の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7758
15
1644
14
1399
52
1293
25
1234
29
Redisメモリデータ型は何ですか？
Apr 10, 2025 pm 02:06 PM
Redisは、5つのコアメモリデータ型を提供します。文字列：基本文字列ストレージ、増分/減少操作をサポートします。リスト：双方向リンクリスト、効率的な挿入/削除操作。セット：非整理操作に使用されていない順序セット。ハッシュ：構造化データの保存に適したキー値ペアストレージ。 zset：順序付けられたセット、各要素には分数があり、分数でソートできます。適切なデータ型を選択することは、パフォーマンスを最適化するために重要です。
作曲家との電子メールマーケティングを簡素化する方法：duwa.ioのアプリケーションプラクティス
Apr 18, 2025 am 11:27 AM
メールマーケティングキャンペーンを行う際には、HTML形式でメールを効率的に作成および送信する方法を実行する際に、トリッキーな問題が発生しています。従来のアプローチは、コードを手動で記述し、SMTPサーバーを使用して電子メールを送信することですが、これは時間がかかるだけでなく、エラーが発生しやすいことです。複数のソリューションを試した後、HTMLメールの作成と送信に役立つシンプルで使いやすいRestapiであるduwa.ioを発見しました。開発プロセスをさらに簡素化するために、Composerを使用してDuwa.ioのPHPライブラリ-CaptainDoe/Duwaをインストールおよび管理することにしました。
異なるデータベースシステムに列を追加する構文は同じですか？
Apr 09, 2025 pm 12:51 PM
さまざまなデータベースシステムに列を追加するための構文は大きく異なり、データベースごとに異なります。例：MySQL：Tableユーザーを変更する列メールVarchar（255）; POSTGRESQL：TABLEユーザーを変更する列メールvarchar（255）null noll inquine; oracle：alter tableユーザーはメールvarchar2（255）; sql server：tableユーザーを追加するメールvarchを追加します
Debianメールサーバーを監視する方法
Apr 12, 2025 pm 10:06 PM
Debianメールサーバーが安定して実行されるようにするには、効果的な監視メカニズムが必要です。この記事では、ログチェック、監視ツール、アラームシステムの設定など、いくつかの監視方法を紹介します。 1。Log監視Debianメールサーバーのログファイルは、通常/var/log/mail.logなどの/var/log/ディレクトリにあります。これらのログを定期的にチェックすると、潜在的な問題をタイムリーに特定することができます。 2。監視ツールとスクリプトの例以下は、CPU、メモリ、ディスクの使用と電子メールアラームの送信の監視のためのいくつかのBASHスクリプトの例を提供します：1。CPU使用監視：＃！/bin/bashthreshold = "your_emai
Nginx仮想ホスト構成スキル、複数のWebサイトを効率的に管理します
Apr 13, 2025 pm 10:03 PM
nginx仮想ホスト構成：サーバーガーデンで再生すると、1つのサーバーが複数のWebサイトを同時にエレガントにサービスする方法について考えたことがありますか？答えは、nginx仮想ホスト構成です。この記事では、nginx仮想ホスト構成のヒントに導入され、「サーバーガーデン」を効率的に管理し、いくつかの一般的な落とし穴を回避できます。読み取り後、仮想ホストを簡単に構成し、その背後にあるメカニズムを理解し、効率的で安定したNginx構成ファイルを書き込むことができます。基本的な準備：ツールボックスを起動する前に、nginxがインストールされていることを確認し、基本的なLinuxコマンドと構成ファイル構造をある程度理解する必要があることを忘れないでください。このステップが完了したと仮定して、ここにNginxをインストールする方法は説明しません。覚えて
トップ10のデジタル仮想通貨アプリのランキング：通貨サークル取引におけるトップ10のデジタル通貨交換
Apr 22, 2025 pm 03:00 PM
上位10のデジタル仮想通貨アプリは次のとおりです。1。Okx、2。Binance、3。Gate.io、4。Coinbase、5。Kraken、6。Huobi、7。Kucoin、8。Bitfinex、9。Bitstamp、10。Poloniex。これらの交換は、トランザクションのボリューム、ユーザーエクスペリエンス、セキュリティなどの要因に基づいて選択され、すべてがさまざまなデジタル通貨取引サービスと効率的な取引エクスペリエンスを提供します。
ビットゲット新しいユーザー登録ガイド2025
Apr 21, 2025 pm 10:09 PM
2025年にビットゲットに登録する手順には、次のものがあります。1。有効な電子メールまたは携帯電話番号と安定したネットワークを準備します。 2。Bitgetの公式ウェブサイトにアクセスしてください。 3.登録ページを入力します。 4.登録方法を選択します。 5。登録情報を入力します。 6。ユーザー契約に同意します。 7。完全な検証。 8。検証コードを取得して入力します。 9。登録を完了します。登録後、アカウントにログインし、KYC IDの確認を実行し、アカウントのセキュリティを確保するためのセキュリティ対策を設定することをお勧めします。
2つの交換はコインを互いに変換できますか？ 2つの交換はコインを互いに変換できますか？
Apr 22, 2025 am 08:57 AM
できる。 2つの交換は、同じ通貨とネットワークをサポートする限り、コインを互いに転送できます。手順には次のものが含まれます。1。コレクションアドレスを取得し、2。引き出しリクエストを開始します。3。確認を待ちます。注：1。正しい転送ネットワークを選択します。2。住所を注意深く確認します。3。手数料を理解します。4。アカウント時間に注意してください。5。交換がこの通貨をサポートしていることを確認します。
