javascript解鎖前端密碼框常見功能做法
更新時(shí)間：2022年03月14日 13:11:20 作者：館主阿牛
這篇文章主要為大家介紹了javascript解鎖前端密碼框常見功能做法示例演示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪
前言
學(xué)前端最基本的登錄頁面肯定要會(huì)寫，那登錄頁面里面的密碼框的功能設(shè)計(jì)就需要好好打磨，主要功能有顯示密碼明文，密碼檢測(cè)信息提示等等，那么本篇博客將寫寫這些功能結(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撐開的，所以要去除下面的間隙*/
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é)語
以上就是javascript解鎖前端密碼框常見功能做法的詳細(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中無法使用currentStyle獲取，默認(rèn)獲取值為auto,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序icon組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
本文主要介紹了js怎么判斷是否是數(shù)組的六種方法小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Javascript實(shí)現(xiàn)禁止輸入中文或英文的例子
這篇文章主要介紹了Javascript實(shí)現(xiàn)禁止輸入中文或英文的方法實(shí)例,本文方法都是使用正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-12-12
這篇文章主要介紹了如何在 JavaScript 中更好地使用數(shù)組，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
基于Javascript實(shí)現(xiàn)返回頂部按鈕
這篇文章主要為大家詳細(xì)介紹了基于Javascript實(shí)現(xiàn)返回頂部按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
雖然說在前端很少有機(jī)會(huì)接觸到算法，大多都交互性的操作，然而從各大公司面試來看，算法依舊是考察的一方面。下面這篇文章就給大家總結(jié)了在前端JS面試中常見的算法問題，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
做了一個(gè)判斷瀏覽器類型和版本號(hào)的業(yè)務(wù)，記錄下相關(guān)的js代碼，個(gè)人感覺還不錯(cuò)，需要的朋友可以參考下2013-10-10
JS尾遞歸的實(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