Bagaimana untuk melaksanakan fungsi paparan kata laluan dalam javascript

Dengan mempopularkan Internet dan perkembangan teknologi, kehidupan kita menjadi lebih digital dan pintar. Dalam kehidupan seharian kita, kata laluan telah menjadi pilihan yang diperlukan untuk kebanyakan orang. Walau bagaimanapun, apabila memasukkan kata laluan, kita sering perlu memastikan ketepatan input, yang memerlukan kita melihat kata laluan dengan jelas. Jadi, bagaimana untuk memaparkan kata laluan? Artikel ini akan memperkenalkan kaedah menggunakan JavaScript untuk memaparkan kata laluan.

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas yang boleh digunakan untuk menambah interaktiviti dan dinamik pada halaman web. Dalam kotak input kata laluan, kita boleh menggunakan JavaScript untuk memaparkan kata laluan dalam masa nyata. Terdapat banyak cara untuk melaksanakan paparan kata laluan, dan artikel ini akan memperkenalkan dua kaedah pelaksanaan.

Kaedah 1: Gunakan atribut jenis input

Terdapat banyak jenis teg input dalam HTML, dan atribut jenis boleh ditetapkan kepada jenis kata laluan. Jenis ini menyembunyikan kandungan kotak input supaya kita tidak dapat melihat kandungan sebenar kata laluan walaupun apabila kita memasukkannya. Walau bagaimanapun, apabila kotak input difokuskan, kita boleh membuat kandungan kotak input kelihatan dengan menukar nilai atribut jenis.

Berikut ialah contoh kod yang menunjukkan cara memaparkan kata laluan dengan menukar jenis atribut input:

<input type="password" id="password">
<button onclick="showPassword()">显示密码</button>

<script>
function showPassword() {
  var password = document.getElementById("password");
  if (password.type === "password") {
    password.type = "text";
  } else {
    password.type = "password";
  }
}
</script>

Dalam contoh ini, kami mula-mula mencipta kotak input kata laluan dan menetapkannya taip kata laluan. Seterusnya, kami mencipta butang dan apabila pengguna mengklik butang tersebut, fungsi showPassword() dipanggil. Fungsi ini akan mendapatkan elemen kotak input kata laluan dan kemudian menyemak nilai atribut jenisnya. Jika atribut jenis ialah kata laluan, tetapkannya kepada teks untuk menjadikan kandungan dalam kotak input kelihatan. Jika atribut jenis ialah teks, tetapkannya kepada kata laluan untuk menyembunyikan kandungan kotak input sekali lagi.

Kaedah 2: Gunakan JavaScript untuk mencipta elemen DOM

Selain menggunakan atribut jenis teg input untuk memaparkan kata laluan, kami juga boleh menjana elemen DOM secara dinamik melalui JavaScript untuk memaparkan kata laluan . Berikut ialah contoh kod:

<div id="passwordContainer">
  <input type="password" id="password">
  <button onclick="showPassword()">显示密码</button>
</div>

<script>
function showPassword() {
  var passwordInput = document.getElementById("password");
  var passwordContainer = document.getElementById("passwordContainer");
  var passwordText = document.createElement("input");

  passwordText.setAttribute("type", "text");
  passwordText.setAttribute("value", passwordInput.value);
  passwordContainer.replaceChild(passwordText, passwordInput);
}
</script>

Dalam contoh ini, kami mula-mula mencipta bekas yang mengandungi kotak input kata laluan dan butang "Tunjukkan Kata Laluan". Apabila pengguna mengklik butang, fungsi showPassword() dipanggil. Fungsi ini akan mendapatkan elemen kotak input kata laluan, kemudian buat elemen input baharu dan tetapkan jenisnya kepada teks. Seterusnya, gantikan kotak input kata laluan asal dengan elemen kotak teks yang baru dijana.

Perlu diambil perhatian bahawa apabila menggantikan elemen DOM, nilai elemen yang baru dijana mesti ditetapkan kepada nilai kotak input kata laluan, jika tidak, pengguna tidak akan dapat melihat kandungan input apabila memasuki kata laluan.

Ringkasan:

Kedua-dua kaedah di atas boleh mencapai paparan masa nyata kata laluan, dan setiap satu mempunyai kelebihan dan kekurangannya sendiri. Menggunakan atribut jenis input adalah sangat mudah, tetapi ia mungkin mempunyai kesan ke atas keselamatan tapak web. Mencipta elemen DOM menggunakan JavaScript agak lebih kompleks, tetapi boleh mengelakkan isu keselamatan dengan berkesan. Dalam aplikasi praktikal, anda boleh memilih kaedah yang sesuai dengan anda mengikut keperluan anda sendiri.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi paparan kata laluan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!