Rumah > hujung hadapan web > tutorial js > Sembunyikan dan paparkan kata laluan borang berdasarkan kemahiran JavaScript_javascript

Sembunyikan dan paparkan kata laluan borang berdasarkan kemahiran JavaScript_javascript

WBOY
Lepaskan: 2016-05-16 15:12:32
asal
1280 orang telah melayarinya

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>
Salin selepas log masuk
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;
}
Salin selepas log masuk
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;
}
}
Salin selepas log masuk
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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan