Kaedah JS untuk memaparkan senarai akhiran e-mel secara automatik apabila memasukkan kemahiran nama_javascript pengguna

Contoh dalam artikel ini menerangkan kaedah memaparkan senarai akhiran e-mel secara automatik apabila memasukkan nama pengguna menggunakan JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Berikut ialah kod, simpan pada fail html dan bukanya:

*{margin:0; padding:0;}
ul,li{list-style:none;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{width:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.merah{warna:merah;}
.tersembunyi {display:none;}

Sila masukkan nama pengguna e-mel anda di bawah:

Prinsipnya ialah: Apabila saya memasukkan sebarang perkataan dalam kotak input, gesaan e-mel yang sepadan secara automatik akan jatuh ke bawah Apabila saya memasukkan 11 dalam kotak input, kotak lungsur akan mempunyai semua e-mel sebanyak 11. Apabila saya memasukkan perkataan lain, akan ada alamat e-mel lain yang sepadan.

Begitu juga, pemalam ini tidak memerlukan sebarang teg html, ia hanya memerlukan kotak input dengan nama kelas yang sepadan dan induk mempunyai nama kelas, dan tiada apa-apa lagi yang diperlukan. Kod HTML dalaman dijana secara automatik.

Kod HTML adalah seperti berikut:

Malah, teg div di atas tidak diperlukan Anda hanya perlu menambah kelas seperti di atas dalam kotak input input dan elemen induk (anda juga boleh menyesuaikannya, hanya lulus dalam kelas semasa permulaan JS. Secara lalai, induk Kelas dipanggil parentCls, kelas kotak input semasa dipanggil inputElem, dan kelas medan tersembunyi dipanggil hiddenCls Hanya mulakan dan masukkan objek kosong secara terus semasa pemula!). Kerana mungkin terdapat berbilang kotak input pada halaman, kelas induk diperlukan untuk membezakan kotak input yang mana itu, medan tersembunyi diperlukan untuk menyimpan nilai dalam latar belakang pembangunan.

Terdapat parameter tatasusunan peti mel mailArr dalam item konfigurasi: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com" ,"@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"]. Ia adalah untuk memberitahu kami bahawa terdapat begitu banyak peti mel lalai Tidak kira apa yang saya masukkan, terdapat begitu banyak gesaan peti mel apabila kotak lungsur dimulakan Apabila saya menentukan item tertentu, saya akan memberikan gesaan untuk menentukan sesuatu item dalam kotak lungsur. Sudah tentu, disebabkan perubahan dalam keperluan, parameter e-mel boleh dikonfigurasikan mengikut keperluan semasa memulakannya.

melaksanakan fungsi berikut:

1. Menyokong pergerakan papan kekunci ke atas dan ke bawah, klik tetikus dan operasi masuk.

2. Apabila mengklik dokumen, kotak lungsur disembunyikan kecuali untuk kotak input semasa. Apabila anda terus memasukkan, pemadanan automatik dan operasi lain dilaksanakan.

Saya tidak akan menerangkan secara terperinci, ia sama seperti fungsi gesaan e-mel automatik semasa mendaftar dalam talian Jika anda mempunyai sebarang pepijat, anda boleh tinggalkan saya mesej, saya tidak akan terlalu panjang!

Kod CSS adalah seperti berikut:

Klik di sini untuk kod e-melAutoComplete.jsMuat turun dari tapak ini.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.