原生JS實(shí)現(xiàn)登錄框郵箱提示
本文分享一個由原生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)證碼
在進(jìn)行表單提交時,需要對輸入框和文本域等的value的合理性進(jìn)行驗(yàn)證,可以編寫form的onSubmit事件,下面給大家介紹js表單提交驗(yàn)證input(type=number) 去三角 刷新驗(yàn)證碼注意事項(xiàng),一起看看吧2017-06-06JS實(shí)現(xiàn)頁面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)頁面導(dǎo)航與內(nèi)容相互錨定實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10js實(shí)現(xiàn)簡單的二級聯(lián)動效果
本文主要介紹了js實(shí)現(xiàn)簡單的二級聯(lián)動效果的實(shí)例,具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03JavaScript 創(chuàng)建隨機(jī)數(shù)和隨機(jī)圖片
關(guān)于javascript隨機(jī)數(shù)的,很早以前的文章了,不過內(nèi)容還是不錯的,如果想要更多的效果,可以去腳本之家搜下。2009-12-12mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼
這篇文章主要介紹了mpvue網(wǎng)易云短信接口實(shí)現(xiàn)小程序短信登錄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04