欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實(shí)現(xiàn)登錄框郵箱提示

 更新時間:2021年10月18日 12:00:19   作者:aiguangyuan  
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)登錄框郵箱提示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文分享一個由原生JS實(shí)現(xiàn)的注冊或登錄時,輸入郵箱時下拉提示效果,效果如下:

 

實(shí)現(xiàn)代碼如下:

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS實(shí)現(xiàn)登錄框提示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            font: 12px/1.125 Arial, Helvetica, sans-serif;
        }
 
        li {
            list-style: none;
        }
 
        #login {
            width: 252px;
            height: 385px;
            /* 彩色背景圖 */
            background: url(images/0.jpg) no-repeat;
            margin: 20px auto;
            position: relative;
        }
 
        .detail {
            margin: 0 0 5px 30px;
            position: relative;
            top: 110px;
        }
 
        .detail input {
            color: #999999;
            border: 1px solid #74C8E5;
            border-radius: 3px 3px 3px 3px;
            height: 15px;
            line-height: 14px;
            padding: 8px 5px 7px;
            width: 184px;
        }
 
        #suggest {
            background: none repeat scroll 0 0 #FFFFFF;
            border: 1px solid #CCCCCC;
            left: 30px;
            margin: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            text-align: left;
            top: 142px;
            visibility: visible;
            width: 194px;
            z-index: 1;
            display: none;
        }
 
        .note,
        .item {
            clear: both;
            color: #999999;
            cursor: pointer;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            list-style: none outside none;
            margin: 0 1px;
            padding: 0 5px;
            white-space: nowrap;
        }
 
        .active {
            white-space: nowrap;
            clear: both;
            color: rgb(153, 153, 153);
            cursor: pointer;
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            list-style: none outside none;
            margin: 0pt 1px;
            padding: 0pt 5px;
            background: none repeat scroll 0% 0% rgb(232, 244, 252);
        }
    </style>
    <script>
 
        //頁面加載完成時
        window.onload = function () {
            //創(chuàng)建構(gòu)造函數(shù)
            var s1 = new Suggest();
            //初始化
            s1.init();
        };
 
        //構(gòu)造函數(shù)
        function Suggest() {
            //獲取用戶名輸入框
            this.oInput = document.getElementById('input1');
            //獲取下拉列表提示框
            this.oUl = document.getElementById('suggest');
            //獲取下拉列表項(xiàng)
            this.aLi = this.oUl.getElementsByTagName('li');
        }
 
        //為構(gòu)造函數(shù)添加原型方法
        Suggest.prototype = {
            //初始化時
            init: function () {
                // 輸入改變時
                this.toChange();
                // 光標(biāo)移開時
                this.toBlur();
            },
            //邊續(xù)觸發(fā)改變時
            toChange: function () {
 
                //添加連續(xù)輸入事件,并兼容各瀏覽器
                var ie = !-[1,];
                var This = this;
 
                if (ie) {
                    this.oInput.onpropertychange = function () {
                        //防止在IE下輸入值為空的時候,觸發(fā)下拉提示框
                        if (This.oInput.value == '') {
                            This.tips();
                            return;
                        }
                        //顯示下拉列表框
                        This.thowUl();
                        //顯示提示
                        This.tips();
                        //輸入時的默認(rèn)選中
                        This.sel(0);
                    };
                } else {
                    this.oInput.oninput = function () {
                        //顯示下拉列表框
                        This.thowUl();
                        //顯示提示
                        This.tips();
                        //輸入時的默認(rèn)選中
                        This.sel(0);
                    };
                }
            },
            //顯示下拉列表框
            thowUl: function () {
                this.oUl.style.display = 'block';
            },
            //光標(biāo)移開時,隱藏下拉擔(dān)示框
            toBlur: function () {
                var This = this;
                this.oInput.onblur = function () {
                    This.oUl.style.display = 'none';
                };
            },
 
            //輸入時,提示內(nèi)空相應(yīng)改變
            tips: function () {
                var value = 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 = 'block';
                    this.aLi[i].bBtn = true;
                }
 
                if (re.test(value)) {
                    //獲取所有l(wèi)i的自定義屬性(除開第一個)
                    for (var i = 1; i < this.aLi.length; i++) {
                        var oEmail = this.aLi[i].getAttribute('email');
                        //為選中的第1個li直接賦值
                        if (i == 1) {
                            //將輸入值賦給li
                            this.aLi[i].innerHTML = value;
 
                        } else {
                            if (re.test(oEmail)) {
                                this.aLi[i].style.display = 'block';
                                this.aLi[i].bBtn = true;
                            } else {
                                this.aLi[i].style.display = 'none';
                                this.aLi[i].bBtn = false;
                            }
                        }
                    }
                } else {
                    //獲取所有l(wèi)i的自定義屬性(除開第一個)
                    for (var i = 1; i < this.aLi.length; i++) {
                        var oEmail = this.aLi[i].getAttribute('email');
                        //如果獲取的oEmail值為空時,即為第一個時
                        if (!oEmail) {
                            //將輸入值賦給li
                            this.aLi[i].innerHTML = value;
                        } else {
                            //li的內(nèi)容為輸入值加上其屬性值
                            this.aLi[i].innerHTML = value + oEmail;
                        }
                    }
                }
            },
            //提示列表項(xiàng)選中方法
            sel: function (iNow) {
 
                var This = this;
                var arr = [];
 
                //選中一個提示后,重新輸入時,將選中項(xiàng)還原為默認(rèn)樣式
                for (var i = 1; i < this.aLi.length; i++) {
                    this.aLi[i].className = 'item';
                    if (this.aLi[i].bBtn) {
                        arr.push(this.aLi[i]);
                    }
                }
 
                //當(dāng)輸入內(nèi)容為空時
                if (this.oInput.value == '') {
                    //樣式為item
                    arr[iNow].className = 'item';
                    //當(dāng)輸入內(nèi)容不為空時
                } else {
                    //樣式為active
                    arr[iNow].className = 'active';
                }
 
 
                //為所有的下拉提示添加鼠標(biāo)移入事件
                for (var i = 1; i < arr.length; i++) {
                    arr[i].index = i;
                    //鼠標(biāo)移入時
                    arr[i].onmouseover = function () {
                        //將所有l(wèi)i的樣式還原為默認(rèn)樣式
                        for (var i = 1; i < This.aLi.length; i++) {
 
                            This.aLi[i].className = 'item';
                        }
                        //為當(dāng)前選項(xiàng)添加樣式為active
                        this.className = 'active';
                        iNow = this.index;
                    };
 
                    //鼠標(biāo)點(diǎn)擊時,將當(dāng)前的提示選項(xiàng)內(nèi)容替換為輸入值
                    arr.onmousedown = function () {
                        This.oInput.value = this.innerHTML;
                    };
                }
 
                //添加鍵盤事件
                document.onkeydown = function (ev) {
                    //做事件兼容
                    var ev = ev || window.event;
                    //上
                    if (ev.keyCode == 38) {
                        if (iNow == 0) {
                            iNow = arr.length - 1;
                        } else {
                            iNow--;
                        }
                        for (var i = 1; i < This.aLi.length; i++) {
                            This.aLi[i].className = 'item';
                        }
                        arr[iNow].className = 'active';
                        //下 
                    } else if (ev.keyCode == 40) {
                        //當(dāng)iNow為最后一個時,賦值為0
                        if (iNow == arr.length - 1) {
                            iNow = 0;
                        } else {
                            iNow++;
                        }
                        //清空所有l(wèi)i樣式為默認(rèn)樣式
                        for (var i = 1; i < This.aLi.length; i++) {
                            This.aLi[i].className = 'item';
                        }
                        //為當(dāng)前選項(xiàng)添加active樣式
                        arr[iNow].className = 'active';
                        //回車
                    } else if (ev.keyCode == 13) {
                        //將當(dāng)前的提示選項(xiàng)內(nèi)容替換為輸入值
                        This.oInput.value = arr[iNow].innerHTML;
                        //將光標(biāo)移開輸入框,關(guān)閉下拉列表項(xiàng)
                        This.oInput.blur();
                    }
                };
 
            }
        };
    </script>
</head>
 
<body>
    <div id="login">
 
        <div class="detail">
            <input id="input1" type="text" maxlength="128" placeholder="郵箱/會員帳號/手機(jī)號" autocomplete="off"
                node-type="loginname" class="name" tabindex="1" name="loginname">
        </div>
 
        <div class="detail">
            <input type="password" maxlength="24" placeholder="請輸入密碼" node-type="password" class="pass" tabindex="2"
                name="password">
        </div>
 
        <ul id="suggest">
            <li class="note">請選擇郵箱類型</li>
            <li email="" 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>
</body>
 
</html>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS表單提交驗(yàn)證、input(type=number) 去三角 刷新驗(yàn)證碼

    JS表單提交驗(yàn)證、input(type=number) 去三角 刷新驗(yàn)證碼

    在進(jìn)行表單提交時,需要對輸入框和文本域等的value的合理性進(jìn)行驗(yàn)證,可以編寫form的onSubmit事件,下面給大家介紹js表單提交驗(yàn)證input(type=number) 去三角 刷新驗(yàn)證碼注意事項(xiàng),一起看看吧
    2017-06-06
  • JS實(shí)現(xiàn)頁面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解

    JS實(shí)現(xiàn)頁面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解

    這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • js實(shí)現(xiàn)簡單的二級聯(lián)動效果

    js實(shí)現(xiàn)簡單的二級聯(lián)動效果

    本文主要介紹了js實(shí)現(xiàn)簡單的二級聯(lián)動效果的實(shí)例,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • JavaScript圖像延遲加載庫Echo.js

    JavaScript圖像延遲加載庫Echo.js

    Echo 是一個獨(dú)立的 JavaScript 懶加載圖像的工具,快速、體積小(不足1k)和使用 HTML5 的 data- 屬性,通過本文給大家介紹JavaScript圖像延遲加載庫Echo.js ,感興趣的朋友一起學(xué)習(xí)吧
    2016-04-04
  • JS 箭頭函數(shù)的this指向詳解

    JS 箭頭函數(shù)的this指向詳解

    這篇文章主要給大家介紹了關(guān)JS 箭頭函數(shù)的this指向,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片

    JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片

    關(guān)于javascript隨機(jī)數(shù)的,很早以前的文章了,不過內(nèi)容還是不錯的,如果想要更多的效果,可以去腳本之家搜下。
    2009-12-12
  • 微信小程序?qū)崿F(xiàn)撥打電話功能的示例代碼

    微信小程序?qū)崿F(xiàn)撥打電話功能的示例代碼

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)撥打電話功能的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼

    mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼

    這篇文章主要介紹了mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • JS驗(yàn)證字符串功能

    JS驗(yàn)證字符串功能

    這篇文章主要介紹了JS驗(yàn)證字符串功能實(shí)例代碼,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • JavaScript如何刪除字符串中子字符串

    JavaScript如何刪除字符串中子字符串

    本文介紹了如何從?JavaScript?中的字符串中刪除子字符串,并提供了兩種常用的方法:replace()?方法和?split()?方法,結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
    2023-05-05

最新評論