html memecahkan masalah browser mengingat kotak input kata sandi

Setelah mengirimkan formulir di browser, browser biasanya akan menanyakan "Apakah Anda perlu mengingat kata sandi?" Setelah konfirmasi, kotak masukan tertentu akan terisi secara otomatis saat formulir dikirimkan berikutnya.

Namun, dalam beberapa skenario (seperti pada halaman penarikan dan isi ulang), pengisian kata sandi secara otomatis sangatlah tidak aman. Beberapa cara diperlukan untuk mencegah pengisian otomatis browser.

Saya menemui beberapa kendala selama proses solusi.

Gunakan atribut HTML autocomplete="off"

Karena fitur pengisian otomatis diterapkan oleh browser itu sendiri, atribut pelengkapan otomatis belum ditulis ke dalam spesifikasi W3C. Banyak browser mengabaikan atribut ini begitu saja. IsiOtomatis tidak dapat dinonaktifkan.

Wajar jika memikirkan cara menggunakan js untuk menyetel nilai input menjadi kosong saat halaman dimuat, namun pengisian otomatis browser sebenarnya terisi setelah js dijalankan. . . Setelah menggunakan js untuk menyetel nilai masukan menjadi kosong, browser secara otomatis mengisi masukan tersebut, yang tidak dapat menyelesaikan masalah.

Tambahkan <input type = "kata sandi"/>

Sebuah metode yang banyak beredar di Internet. Metode ini dapat dilakukan pada sebagian besar versi browser, tetapi tidak berfungsi pada beberapa versi browser dan Safari yang lebih tinggi. Beberapa metode yang diperkenalkan kemudian didasarkan pada perbaikan metode ini.

<!-- Masukan tambahan -->
<input type="kata sandi" style="display:none"/>
<!-- Masukan asli -->
<masukan tipe = "kata sandi"/>

Tambahkan formulir

Metode ini memecahkan masalah pengisian otomatis di Safari dibandingkan dengan yang di atas. Namun itu tidak berfungsi di beberapa versi Chrome yang lebih tinggi. (Setelah pengujian, Chrome 46.0 berfungsi, Chrome 47.0 gagal)

<!-- Formulir dan masukan tambahan -->
<form style="tampilan:tidak ada">
  <masukan tipe = "kata sandi"/>
</bentuk>
<!-- Masukan asli -->
<masukan tipe = "kata sandi"/>

solusi akhir

Solusi ini menggabungkan dua metode di atas, dan akhirnya memecahkan masalah pengisian otomatis pada Chrome 47.0.

<!--Konten tambahan-->
<form style="tampilan:tidak ada">
  <masukan tipe = "kata sandi"/>
</bentuk>
<input type="password" style="width:0;height:0;float:left;visibility:hidden"/>
<!-- Masukan asli -->
<masukan tipe = "kata sandi"/>

Yang perlu diperhatikan dalam cara ini adalah input yang generasinya sama dengan input target tidak bisa diset menjadi display:none. Jika sudah diset maka akan otomatis terisi di Chrome 47.0, jadi hanya bisa menggunakan cara lain untuk menyembunyikan masukan ini.

Ringkasan

Setelah menggunakan solusi terakhir, ini berjalan dengan baik di berbagai browser, dan untuk saat ini tidak ditemukan pengisian otomatis. Benar saja, masalah kompatibilitas front-end selalu menjadi hal yang menjijikkan. .

Demikianlah artikel kali ini tentang bagaimana HTML memecahkan masalah mengingat kotak input kata sandi di browser. Untuk informasi lebih lanjut tentang mengingat kotak input kata sandi dalam HTML, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menjelajahi artikel terkait di bawah ini downcodes.com lebih banyak lagi di masa mendatang!