Pilihan untuk kata laluan mendedahkan input

HTML menyediakan jenis input yang secara khusus mengendalikan kata laluan:

<input type="password">

Dengan jenis ini, mata yang dipaparkan sebagai kabur apabila input:

••••••••••

Ini adalah ukuran yang diambil oleh laman web untuk meningkatkan keselamatan. Tanpa ciri ini, mudah bagi orang lain untuk mendapatkan kata laluan anda dengan mengintip.

Walau bagaimanapun, pengalaman pengguna juga sentiasa bertambah baik, dan kini biasanya ada pilihan:

☑️ Tunjukkan kata laluan?

Dengan cara ini pengguna boleh memilih sama ada untuk memaparkan kata laluan. Kebanyakan pengguna boleh melihat -lihat sebelum memasukkan kata laluan mereka, mengesahkan bahawa tiada siapa yang mengintip, dan kemudian memilih untuk memaparkan kata laluan untuk memastikan bahawa mereka telah memasukkan kata laluan dengan betul dan mengelakkan masalah yang disebabkan oleh memasukkan kata laluan yang salah beberapa kali.

Jadi, bagaimana untuk mencapainya?

Kaedah 1: Gunakan javascript untuk menukar type="password" dan type="text"

Ini adalah kaedah yang paling biasa digunakan pada masa ini kerana ia berfungsi dengan baik dalam semua pelayar.

 const input = document.QuerySelector (". Kata laluan input");
// Apabila kotak semak dipilih ...
jika (input.getAttribute ("type") === "kata laluan") {
  input.setAttribute ("type", "text");
} else {
  input.setAttribute ("type", "kata laluan");
}

Masalah dengan kaedah ini adalah bahawa ia perlu melaksanakan fungsi paparan kata laluan/menyembunyikan fungsi dengan mengubah jenis input, yang nampaknya agak pelik. Lebih penting lagi, ia mungkin bertentangan dengan alat Pengurus Kata Laluan. Mengubah jenis input boleh menyebabkan pengurus kata laluan (termasuk pengurus kata laluan terbina dalam pelayar) untuk tidak diiktiraf atau secara automatik mengisi kata laluan.

Kaedah 2: Gunakan -webkit-text-security dalam CSS

Ini bukan penyelesaian yang berdaya maju, kerana harta ini hanya sah dalam beberapa pelayar. Tetapi jelas bahawa seseorang pernah mahu memindahkan ciri ini ke CSS kerana ia berfungsi dalam beberapa pelayar.

 input [type = "kata laluan"] {
  -WebKit-Text-Security: Square;
}
form.show-Passwords input [type = "password"] {
  -WebKit-Text-Security: Tiada;
}

Kaedah 3: Gunakan input-security dalam CSS

Pada masa ini terdapat spesifikasi editorial draf untuk input-security . Ia pada dasarnya adalah nilai togol.

 form.show-Passwords input [type = "password"] {
  Input-keselamatan: Tiada;
}

Kaedah ini ringkas dan jelas. Tetapi tiada penyemak imbas menyokongnya lagi. Oleh itu, kita hanya boleh menggunakan kaedah 1 pada masa ini.

Demo (semua kaedah)

Atas ialah kandungan terperinci Pilihan untuk kata laluan mendedahkan input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!