HTML5 五種密碼框

2024-04-27 15:06:39

字體：大中小

供稿：網(wǎng)友

<html> <head> <meta charset="utf8"> <title>五種密碼類型</title> <style> body { font-size: 16px; } .container { border: 1px groove black; padding: 10px; margin-bottom: 10px; } label { display: block; margin-bottom: 10px; } input[type=passWord],input[type=text] { border-radius: 2px; border: 1px solid #ccc; transition: box-shadow .5s; } input[type=password]:hover,input[type=text]:hover { /* 添加邊框陰影 */ box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); } #customPwdContainer { /* 如果這里不聲明relative,那么限制不了內(nèi)部的absolute元素 */ position: relative; } #plain5 { /* 這樣才能讓2個元素重疊 */ position: absolute; /* 為了讓上邊框重合,否則會差一個上邊框的寬度 */ top: 0; z-index: 1; } </style> </head> <body> <div class="container"> <label>普通密碼框</label> <input type="password"> </div> <div class="container"> <label>帶占位符的密碼框</label> <input type="password" placeholder="請輸入密碼"> </div> <div class="container"> <label>限制長度的密碼框</label> <input type="password" maxlength="6"> </div> <div class="container"> <label>可更改可見性的密碼框</label> <input type="password" id="pwd4"> <input type="checkbox" onchange="changePwd4Visible()" id="cb4">是否顯示密碼 </div> <div class="container"> <label>自定義密碼框</label> <span id="customPwdContainer">  <input type="text" id="plain5">  <input type="text" id="pwd5"> </span> <input type="checkbox" onchange="changePwd5Visible()" id="cb5">是否顯示密碼 </div> <script> var pwd4 = document.getElementById("pwd4"); var cb4 = document.getElementById("cb4"); function changePwd4Visible() { pwd4.type = event.target.checked ? "text" : "password"; } var plain5 = document.getElementById("plain5"); var pwd5 = document.getElementById("pwd5"); var cb5 = document.getElementById("cb5"); //如果沒有onkeydown,那么一直按著按鍵不會觸發(fā) //onkeydown的時候并不會立馬更新value,所以必須有onkeyup //如果只有onkeydown和onkeyup,那么刪除文本不會觸發(fā); plain5.onkeydown = plain5.onkeyup = plain5.onchange = function() { pwd5.value = plain5.value.replace(/./g, "*"); /* 這里一旦設(shè)置selection,那么就把聚焦的對話框轉(zhuǎn)移了.所以輸入密文密碼時無法顯示光標(biāo) if(!cb5.checked) { pwd5.selectionStart = plain5.selectionStart; pwd5.selectionEnd = plain5.selectionEnd; } */ } function changePwd5Visible() { //顯示明文,密文框在下層 //顯示密文,明文框在上層,透明度為0 plain5.style.opacity = cb5.checked ? 1 : 0; } changePwd5Visible(); </script> </body></html>

這里寫圖片描述