javascript解鎖前端密碼框常見(jiàn)功能做法
前言
學(xué)前端最基本的登錄頁(yè)面肯定要會(huì)寫(xiě),那登錄頁(yè)面里面的密碼框的功能設(shè)計(jì)就需要好好打磨,主要功能有顯示密碼明文,密碼檢測(cè)信息提示等等,那么本篇博客將寫(xiě)寫(xiě)這些功能結(jié)合js怎么做,很簡(jiǎn)單,看一下就會(huì)了。
顯示隱藏密碼明文
1.用到的圖片素材
2.代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input{ width: 370px; height: 30px; border: 0; outline: none; } .box .image{ position: absolute; top:2px; right: 2px; border: 1px solid #ccc; background-color: #ccccccba; border-radius: 50%; overflow: hidden; } .box img{ vertical-align: bottom; /*父盒子是由img撐開(kāi)的,所以要去除下面的間隙*/ width: 22px; } </style> </head> <body> <div class="box"> <div class="image"> <img src="close.png" alt="" id="img"> </div> <input type="password" id="pwd"> </div> <script> var img = document.getElementById('img'); var pwd = document.getElementById('pwd'); var flag = 0; img.onclick = function(){ if(flag == 0){ pwd.type = 'text'; this.src='open.png'; // this指向事件函數(shù)的調(diào)用者,即img flag = 1; }else{ pwd.type = 'password'; this.src='close.png'; flag = 0; } } </script> </body> </html>
3.結(jié)果演示
密碼框驗(yàn)證信息
1.用到的圖片素材
2.代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .register{ width: 600px; margin: 100px auto; } .ipt{ width: 250px; border: 1px solid #999; outline: none; } .message{ display: inline-block; height: 20px; font-size: 12px; color: #999; background: url(mess.png) no-repeat left center; padding-left: 30px; } .wrong{ color: red; background: url(wrong.png) no-repeat left center; } .right{ color: green; background: url(right.png) no-repeat left center; } </style> </head> <body> <div class="register"> <input type="password" class="ipt"> <p class="message">請(qǐng)輸入6~16位密碼</p> </div> <script> var ipt = document.querySelector('.ipt'); var msg = document.querySelector('.message'); ipt.onfocus = function(){ this.style.borderColor = 'skyblue' } ipt.onblur = function(){ this.style.borderColor = '#999'; if(this.value.length<6 || this.value.length>16){ msg.className = 'message wrong'; msg.innerHTML = '你輸入的位數(shù)不符合要求6~16位!'; }else{ msg.className = 'message right'; msg.innerHTML = '你輸入的正確!'; } } </script> </body> </html>
3.結(jié)果演示
結(jié)語(yǔ)
以上就是javascript解鎖前端密碼框常見(jiàn)功能做法的詳細(xì)內(nèi)容,更多關(guān)于javascript前端密碼框功能做法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
元素未顯示設(shè)置width/height時(shí)IE中使用currentStyle獲取為auto
元素未顯示設(shè)置width/height時(shí)IE中無(wú)法使用currentStyle獲取,默認(rèn)獲取值為auto,需要的朋友可以參考下2014-05-05Javascript實(shí)現(xiàn)禁止輸入中文或英文的例子
這篇文章主要介紹了Javascript實(shí)現(xiàn)禁止輸入中文或英文的方法實(shí)例,本文方法都是使用正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-12-12基于Javascript實(shí)現(xiàn)返回頂部按鈕
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)返回頂部按鈕,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02前端JS面試中常見(jiàn)的算法問(wèn)題總結(jié)
雖然說(shuō)在前端很少有機(jī)會(huì)接觸到算法,大多都交互性的操作,然而從各大公司面試來(lái)看,算法依舊是考察的一方面。下面這篇文章就給大家總結(jié)了在前端JS面試中常見(jiàn)的算法問(wèn)題,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-12-12js判斷運(yùn)行jsp頁(yè)面的瀏覽器類(lèi)型以及版本示例
做了一個(gè)判斷瀏覽器類(lèi)型和版本號(hào)的業(yè)務(wù),記錄下相關(guān)的js代碼,個(gè)人感覺(jué)還不錯(cuò),需要的朋友可以參考下2013-10-10JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧
這篇文章主要介紹了JS尾遞歸的實(shí)現(xiàn)方法及代碼優(yōu)化技巧,結(jié)合實(shí)例形式分析了尾遞歸的原理、JS實(shí)現(xiàn)方法及優(yōu)化技巧,需要的朋友可以參考下2019-01-01一個(gè)對(duì)于Array的簡(jiǎn)單擴(kuò)展
一個(gè)對(duì)于Array的簡(jiǎn)單擴(kuò)展...2006-10-10