Gunakan tata letak bootstrap untuk menambahkan ikon yang jelas satu klik di kotak input input, seperti ikon jernih satu klik di kotak input nama login dan ikon mata kecil yang menampilkan kata sandi di kotak input kata sandi, seperti yang ditunjukkan pada gambar di bawah ini:
Namun, ketika memasukkan ikon ke dalam kotak input input, ikon -ikon kecil ini tidak bisa mendapatkan acara klik;
Jadi pertanyaannya adalah, bagaimana ikon -ikon kecil ini mendapatkan acara klik?
Saya tidak tahu, tetapi saya dapat menggunakan cara bundaran untuk mengimplementasikan fungsi ini secara tidak langsung .
*** Poin kuncinya adalah:
Solusi: Tambahkan elemen yang tidak terlihat ke posisi ikon kecil, dan ukuran elemen hanya menutupi ikon kecil, tetapi tidak ada warna latar belakang dan perbatasan; setara dengan menutupi ikon kecil dengan selimut transparan;
Salin Kode sebagai berikut: <VET>
<span> <i> </i> </span>
<input type = "text" placeholder = "akun/nomor ponsel/email" id = "nama pengguna">
<span style = "display: inline-block;"> </span> <-elemen ikon kecil->
<span style = "Display: inline-block; Border: 1px solid red; lebar: 30px; tinggi: 30px; posisi: absolute; kanan: 2px; z-index: 100; kursor: pointer;"> </span> <-elemen di atas ikon kecil->
</div>
Tambahkan acara ke elemen ini yang dilapis di ikon kecil. Fungsi ikon kecil hanya untuk menampilkan dan bersembunyi sesuai kebutuhan;
Ini diwujudkan secara tidak langsung. Apakah efek klik dari ikon kecil merupakan solusi yang hebat? Terima kasih atas bacaan Anda, dan saya harap ini dapat membantu Anda menyelesaikan masalah dengan lancar.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis