Sembunyikan dan paparkan kata laluan borang berdasarkan kemahiran JavaScript_javascript

Untuk keselamatan laman web, ramai rakan yang menetapkan kata laluan menjadi lebih kompleks, tetapi kata laluan tidak dapat dipaparkan dengan jelas, dan saya tidak tahu sama ada input itu betul atau salah, demi keselamatan, kata laluan boleh dipaparkan, jadi bagaimana untuk melaksanakannya berdasarkan kod js Bagaimana pula? Apabila pengguna memasukkan, kata laluan dipaparkan sebagai titik atau asterisk Untuk memastikan bahawa input pengguna adalah betul, pengguna boleh mengklik butang untuk memaparkan kata laluan sahaja

Struktur antara muka, kotak laluan luar, kemudian tambah input dan teg i pada lapisan dalam dan tambahkan nama kelas yang sepadan dengannya.

<div class="pass-box">
<input type="password" name="pass" />
<i state="off"></i>
</div>

Sekarang kita menambah nilai atribut yang sepadan ke kelas yang sepadan Dalam kotak ini, saya perlu berada di atas input, jadi kita perlu memberikan i atribut kedudukan, dan kemudian laraskan bahagian atas dan kanannya dan ketinggian, Tetapkan imej latar belakangnya.

.pass-box {
width: 300px;
margin: 30px auto;
position: relative;
}
.pass-box input {
border: #cccccc 1px solid;
background-color: #fff;
color: #666;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.pass-box i{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
right: 5px;
top:5px;
background-image: none;
background-size: 200% 200%;
background-position: center;
}

Dengan cara ini, kesan antara muka selesai Kemudian tambahkan acara klik pada i Dalam struktur HTML, kami memberikan i keadaan ini digunakan terutamanya untuk menilai kesan dua klik pengguna , kata laluan dipaparkan; klik Kali kedua, kata laluan disembunyikan. Jadi gunakan keadaan ini untuk menyemak statusnya

Titik utama ialah mengubah suai atribut jenis input Apabila dipaparkan, jenisnya ialah teks, dan apabila disembunyikan, ia adalah kata laluan, pemprosesan logik JS adalah agak jelas.

var ele_pass_box = document.getElementsByTagName("div")[0];
var ele_pass = ele_pass_box.getElementsByTagName("input")[0];
var ele_eye = ele_pass_box.getElementsByTagName("i")[0];
ele_eye.onclick = function () {
var state = this.getAttribute("state");
if(state === "off") {
ele_pass.setAttribute("type", "text");
ele_eye.setAttribute("state", "on");
ele_eye.style.opacity = 0.2;
} else {
ele_pass.setAttribute("type", "password");
ele_eye.setAttribute("state", "off");
ele_eye.style.opacity = 1;
}
}

Ini adalah kod logik, jumlah kod tidak banyak Apabila menguji, hanya perhatikan butirannya.

Di atas ialah keseluruhan kandungan yang dikongsi oleh editor dengan anda untuk menyembunyikan dan memaparkan kata laluan borang berdasarkan JavaScript. Saya harap ia akan membantu semua orang!