ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メールアドレスを入力する際のドロップダウンプロンプトのネイティブ JS 実装を紹介します。効果は次のとおりです。

実装コードは次のとおりです。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>ログイン ボックス プロンプトを実装するネイティブ JS</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
 
        体 {
            フォント: 12px/1.125 Arial、Helvetica、sans-serif;
        }
 
        li {
            リストスタイル: なし;
        }
 
        ＃ログイン {
            幅: 252px;
            高さ: 385px;
            /* カラー背景画像 */
            背景: url(images/0.jpg) 繰り返しなし;
            マージン: 20px 自動;
            位置: 相対的;
        }
 
        。詳細 {
            マージン: 0 0 5px 30px;
            位置: 相対的;
            上: 110px;
        }
 
        .詳細入力{
            色: #999999;
            境界線: 1px 実線 #74C8E5;
            境界線の半径: 3px 3px 3px 3px;
            高さ: 15px;
            行の高さ: 14px;
            パディング: 8px 5px 7px;
            幅: 184ピクセル;
        }
 
        ＃提案する {
            背景: なし 繰り返しスクロール 0 0 #FFFFFF;
            境界線: 1px 実線 #CCCCCC;
            左: 30px;
            マージン: 0;
            オーバーフロー: 非表示;
            パディング: 0;
            位置: 絶対;
            テキスト配置: 左;
            上: 142px;
            可視性: 可視;
            幅: 194ピクセル;
            zインデックス: 1;
            表示: なし;
        }
 
        。注記、
        。アイテム {
            クリア: 両方;
            色: #999999;
            カーソル: ポインタ;
            フォントサイズ: 12px;
            高さ: 20px;
            行の高さ: 20px;
            リストスタイル: none の外側は none;
            マージン: 0 1px;
            パディング: 0 5px;
            空白: ラップなし;
        }
 
        。アクティブ {
            空白: ラップなし;
            クリア: 両方;
            色: rgb(153, 153, 153);
            カーソル: ポインタ;
            フォントサイズ: 12px;
            高さ: 20px;
            行の高さ: 20px;
            リストスタイル: none の外側は none;
            マージン: 0pt 1px;
            パディング: 0pt 5px;
            背景: なし 繰り返しスクロール 0% 0% rgb(232, 244, 252);
        }
    </スタイル>
    <スクリプト>
 
        //ページが読み込まれたとき window.onload = function () {
            //コンストラクタを作成する var s1 = new Suggest();
            // s1.init() を初期化します。
        };
 
        //コンストラクタ関数Suggest() {
            //ユーザー名入力ボックスを取得します。this.oInput = document.getElementById('input1');
            //ドロップダウン リストのプロンプト ボックスを取得します。this.oUl = document.getElementById('suggest');
            //ドロップダウンリスト項目を取得します。this.aLi = this.oUl.getElementsByTagName('li');
        }
 
        //コンストラクタにプロトタイプメソッドを追加する Suggest.prototype = {
            // 初期化 init: function () {
                //入力が変更されたとき this.toChange();
                //カーソルが離れたら this.toBlur();
            },
            //エッジが引き続き変更をトリガーする場合、toChange: function () {
 
                //連続入力イベントを追加し、すべてのブラウザと互換性を持たせます var ie = !-[1,];
                var これ = これ;
 
                もし（つまり）{
                    this.oInput.onpropertychange = 関数（）{
                        //IEで入力値が空の場合にドロップダウンプロンプトボックスがトリガーされないようにする if (This.oInput.value == '') {
                            これはヒントです。
                            戻る;
                        }
                        //ドロップダウンリストボックスを表示します。This.thowUl();
                        //ヒントを表示This.tips();
                        //inputThis.sel(0); の場合のデフォルト選択
                    };
                } それ以外 {
                    this.oInput.oninput = 関数 () {
                        //ドロップダウンリストボックスを表示します。This.thowUl();
                        //ヒントを表示This.tips();
                        //inputThis.sel(0); の場合のデフォルト選択
                    };
                }
            },
            //ドロップダウンリストボックスを表示する thowUl: function () {
                this.oUl.style.display = 'ブロック';
            },
            //カーソルが離れたらドロップダウン表示ボックスを非表示にする toBlur: function () {
                var これ = これ;
                this.oInput.onblur = 関数 () {
                    This.oUl.style.display = 'なし';
                };
            },
 
            //入力すると、プロンプト内のスペースがそれに応じて変化します。ヒント: function () {
                var 値 = this.oInput.value;
 
                //メールボックスの正規表現を定義します (@ プラス @ の後に入力された値とスペース)
                var re = new RegExp('@' + value.substring(value.indexOf('@') + 1) + '');
 
                //ドロップダウンリストを初期化する //入力をクリアした後にドロップダウンリストが表示されないようにする for (var i = 1; i < this.aLi.length; i++) {
                    this.aLi[i].style.display = 'ブロック';
                    this.aLi[i].bBtn = true;
                }
 
                if (re.test(値)) {
                    // すべての li のカスタム属性を取得します (最初の li を除く)
                    (var i = 1; i < this.aLi.length; i++) {
                        var oEmail = this.aLi[i].getAttribute('email');
                        //最初に選択されたliに直接値を割り当てる if (i == 1) {
                            //入力値をliに代入する
                            this.aLi[i].innerHTML = 値;
 
                        } それ以外 {
                            if (re.test(oEmail)) {
                                this.aLi[i].style.display = 'ブロック';
                                this.aLi[i].bBtn = true;
                            } それ以外 {
                                this.aLi[i].style.display = 'なし';
                                this.aLi[i].bBtn = false;
                            }
                        }
                    }
                } それ以外 {
                    // すべての li のカスタム属性を取得します (最初の li を除く)
                    (var i = 1; i < this.aLi.length; i++) {
                        var oEmail = this.aLi[i].getAttribute('email');
                        //取得したoEmail値が空の場合、初めてif (!oEmail) {
                            //入力値をliに代入する
                            this.aLi[i].innerHTML = 値;
                        } それ以外 {
                            //liの内容は入力値とその属性値の合計です。this.aLi[i].innerHTML = value + oEmail;
                        }
                    }
                }
            },
            //プロンプトリスト項目選択メソッド sel: function (iNow) {
 
                var これ = これ;
                var arr = [];
 
                //プロンプトを選択した後、再入力すると、選択した項目をデフォルトのスタイルに復元します for (var i = 1; i < this.aLi.length; i++) {
                    this.aLi[i].className = 'アイテム';
                    if (this.aLi[i].bBtn) {
                        arr.push(this.aLi[i]);
                    }
                }
 
                //入力内容が空の場合 if (this.oInput.value == '') {
                    //スタイルはアイテム
                    arr[iNow].className = 'アイテム';
                    //入力内容が空でない場合} else {
                    //スタイルはアクティブです
                    arr[iNow].className = 'アクティブ';
                }
 
 
                //すべてのドロップダウンヒントにマウス移動イベントを追加します for (var i = 1; i < arr.length; i++) {
                    arr[i].インデックス = i;
                    //マウスが動いたとき arr[i].onmouseover = function () {
                        //すべてのliのスタイルをデフォルトのスタイルに復元します for (var i = 1; i < This.aLi.length; i++) {
 
                            This.aLi[i].className = 'item';
                        }
                        //現在のオプションにアクティブとしてスタイルを追加します
                        this.className = 'アクティブ';
                        インデックス
                    };
 
                    //マウスがクリックされたら、現在のプロンプトオプションの内容を入力値に置き換えます。arr.onmousedown = function () {
                        this.oInput.value = this.innerHTML;
                    };
                }
 
                //キーボードイベントを追加 document.onkeydown = function (ev) {
                    // イベントを互換性のあるものにする var ev = ev || window.event;
                    // (ev.keyCode == 38) の場合 {
                        iNow == 0 の場合
                            iNow = arr.length - 1;
                        } それ以外 {
                            今--;
                        }
                        (var i = 1; i < This.aLi.length; i++) {
                            This.aLi[i].className = 'item';
                        }
                        arr[iNow].className = 'アクティブ';
                        //次へ} else if (ev.keyCode == 40) {
                        //iNowが最後の場合は、値0を割り当てます
                        iNow == arr.length - 1 の場合 {
                            iNow = 0;
                        } それ以外 {
                            iNow++;
                        }
                        // すべてのliスタイルをデフォルトスタイルにクリアします for (var i = 1; i < This.aLi.length; i++) {
                            This.aLi[i].className = 'item';
                        }
                        //現在のオプションにアクティブスタイルを追加します。arr[iNow].className = 'active';
                        //Enter} else if (ev.keyCode == 13) {
                        //現在のプロンプトオプションの内容を入力値に置き換えます。This.oInput.value = arr[iNow].innerHTML;
                        //カーソルを入力ボックスから離し、ドロップダウン リスト項目を閉じます。This.oInput.blur();
                    }
                };
 
            }
        };
    </スクリプト>
</head>
 
<本文>
    <div id="ログイン">
 
        <div class="詳細">
            <input id="input1" type="text" maxlength="128" placeholder="メールアドレス/会員アカウント/携帯電話番号" autocomplete="off"
                node-type="ログイン名" class="名前" tabindex="1" name="ログイン名">
        </div>
 
        <div class="詳細">
            <input type="password" maxlength="24" placeholder="パスワードを入力してください" node-type="password" class="pass" tabindex="2"
                名前="パスワード">
        </div>
 
        <ul id="提案">
            <li class="note">メールの種類を選択してください</li>
            <li メール="" class="item"></li>
            <li email="@sina.com" class="item">@sina.com</li>
            <li email="@163.com" class="item">@163.com</li>
            <li email="@qq.com" class="item">@qq.com</li>
            <li email="@126.com" class="item">@126.com</li>
            <li email="@vip.sina.com" class="item">@vip.sina.com</li>
            <li email="@sina.cn" class="item">@sina.cn</li>
            <li email="@hotmail.com" class="item">@hotmail.com</li>
            <li email="@gmail.com" class="item">@gmail.com</li>
            <li email="@sohu.com" class="item">@sohu.com</li>
            <li email="@yahoo.cn" class="item">@yahoo.cn</li>
            <li email="@139.com" class="item">@139.com</li>
            <li email="@wo.com.cn" class="item">@wo.com.cn</li>
            <li email="@189.cn" class="item">@189.cn</li>
        </ul>
    </div>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: