Artikel ini menjelaskan metode menampilkan daftar sufiks kotak surat secara otomatis dengan memasukkan nama pengguna oleh JS. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Berikut ini adalah kode, simpan ke file html untuk dibuka:
Salin kode sebagai berikut: <! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> Masukkan nama pengguna untuk secara otomatis menampilkan daftar sufiks kotak surat </iteme>
<type skrip = "Text/JavaScript" src = "jQuery/jQuery-1.10.2.min.js"> </script>
<tyle>
*{margin: 0; padding: 0;}
ul, li {List-style: none;}
.Inputelem {lebar: 198px; tinggi: 22px; garis-tinggi: 22px; Border: 1px solid #ff4455;}
.parentcls {width: 200px;}
.Auto-Tip Li {Lebar: 100%; Tinggi: 22px; Line-Height: 22px; font-size: 14px;}
.auto-tip li.hoverbg {latar belakang: #ddd; kursor: pointer;}
.red {color: red;}
.hidden {display: none;}
</tyle>
<script type = "text/javascript" src = "js/emailAutocomplete.js"> </script>
</head>
<body>
<div>
Harap masukkan nama pengguna email di bawah ini:
<div>
<input type = "text">
</div>
</div>
</body>
</html>
Prinsipnya adalah: ketika saya memasukkan kata apa pun, prompt email yang sesuai akan ditarik secara otomatis. Ketika saya memasukkan 11 di kotak input, kotak drop-down akan memasukkan semua 11 email. Ketika saya memasukkan email lain, akan ada email lain yang sesuai dengan salinan lainnya.
Demikian pula, plug-in ini tidak memerlukan tag HTML. Ini hanya membutuhkan kotak input untuk memiliki nama kelas kelas yang sesuai, yang OK. Orang tua memiliki nama kelas kelas, dan tidak ada lagi yang dibutuhkan. Kode HTML internal dihasilkan secara otomatis.
Kode HTML adalah sebagai berikut:
Salin Kode sebagai berikut: <VET>
<input type = "text">
</div>
Faktanya, tag div di atas tidak perlu menambahkan kelas seperti di atas ke kotak input input dan elemen induk (kustomisasi juga dimungkinkan, tetapi ketika inisialisasi JS, tidak apa -apa. Secara default, kelas induk disebut ParentCls, kelas input saat ini disebut inputelem, dan kelas bidang tersembunyi disebut hiddencls. Karena mungkin ada beberapa kotak input pada halaman, kelas induk diperlukan untuk membedakan kotak input mana, dan tentu saja nilai penyimpanan domain tersembunyi diperlukan untuk latar belakang pengembangan.
Ada parameter array email Mailarr di item konfigurasi: ["@qq.com", "@qq2.com", "@gmail.com", "@126.com", "@163.com", "@hotmail.com", "@yahoo.com", "itu [email protected]. Kotak surat apa pun yang saya masukkan, ada begitu banyak permintaan email saat menginisialisasinya.
Fungsi yang diimplementasikan adalah sebagai berikut:
1. Mendukung operasi keyboard naik dan turun, dan mendukung mouse klik dan tekan ENTER.
2. Saat mengklik dokumen, kotak drop-down disembunyikan kecuali untuk kotak input input saat ini. Ketika input diikuti, pencocokan otomatis dan operasi lainnya diimplementasikan.
Belum lagi detailnya, ini mirip dengan fungsi prompt email otomatis saat mendaftar secara online. Jika ada bug, Anda dapat meninggalkan saya pesan, jadi saya tidak akan membahas detailnya!
Kode CSS adalah sebagai berikut:
Salin kode sebagai berikut: <tyle>
*{margin: 0; padding: 0;}
ul, li {List-style: none;}
.Inputelem {lebar: 198px; tinggi: 22px; garis-tinggi: 22px; Border: 1px solid #ff4455;}
.parentcls {width: 200px;}
.Auto-Tip Li {Lebar: 100%; Tinggi: 22px; Line-Height: 22px; font-size: 14px;}
.auto-tip li.hoverbg {latar belakang: #ddd; kursor: pointer;}
.red {color: red;}
.hidden {display: none;}
</tyle>
Klik di sini untuk mengunduh kode emailAutocomplete.js.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.