تصف هذه المقالة طريقة عرض قائمة لاحقة صندوق البريد تلقائيًا عن طريق إدخال اسم مستخدم بواسطة JS. شاركه للرجوع إليه. التفاصيل كما يلي:
فيما يلي الرمز ، احفظه على ملف HTML لفتحه:
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> أدخل اسم المستخدم لعرض قائمة لاحقة صندوق البريد تلقائيًا </title>
<script type = "text/javaScript" src = "jQuery/jQuery-1.10.2.min.js"> </script>
<style>
*{الهامش: 0 ؛ حشو: 0 ؛}
ul ، li {list-style: none ؛}
.inputelem {width: 198px ؛ الارتفاع: 22px ؛ خط الذروة: 22px ؛ الحدود: 1px صلبة #ff4455 ؛}
.ParentCls {Width: 200px ؛}
.Auto-tip li {width: 100 ٪ ؛ الارتفاع: 22px ؛ خط الارتفاع: 22px ؛ حجم الخط: 14px ؛}
.auto-tip li.hoverbg {background: #ddd ؛ المؤشر: مؤشر ؛}
.red {color: red ؛}
.hidden {display: none ؛}
</style>
<script type = "text/javaScript" src = "js/emailautocplete.js"> </script>
</head>
<body>
<viv>
الرجاء إدخال اسم مستخدم البريد الإلكتروني أدناه:
<viv>
<type type = "text">
</div>
</div>
</body>
</html>
المبدأ هو: عندما أدخل أي كلمة ، سيتم سحب موجه البريد الإلكتروني المقابل تلقائيًا. عندما أدخل 11 في مربع الإدخال ، سيكون مربع المنسدلة يتم إدخال جميع رسائل البريد الإلكتروني الـ 11. عندما أدخل رسائل بريد إلكتروني أخرى ، ستكون هناك رسائل بريد إلكتروني أخرى تتوافق مع نسخة أخرى.
وبالمثل ، لا يتطلب هذا المكون الإضافي أي علامات HTML. يتطلب فقط مربع إدخال أن يكون له اسم فئة الفئة المقابلة ، وهو أمر جيد. الوالد لديه اسم الفصل الدراسي ، وليس هناك حاجة إلى أي شيء آخر. يتم إنشاء رمز HTML الداخلي تلقائيًا.
رمز HTML كما يلي:
انسخ الرمز على النحو التالي: <div>
<type type = "text">
</div>
في الواقع ، لا تحتاج علامات DIV أعلاه إلى إضافة فئة كما هو مذكور أعلاه إلى مربع الإدخال والإدخال والعنصر الأصل (التخصيص ممكن أيضًا ، ولكن عندما يكون تهيئة JS ، بشكل جيد. بشكل افتراضي ، تسمى الفئة الأصل ParentCls ، ويسمى فئة مربع الإدخال الحالية InpectElem ، ويسمى فئة الحقل المخفي hiddencls. نظرًا لوجود مربعات إدخال متعددة على الصفحة ، هناك حاجة إلى فئة من الأمهات لتمييز مربع الإدخال ، وبالطبع هناك حاجة إلى قيمة تخزين المجال المخفية لخلفية التطوير.
يوجد MailArr mailarr معلمة Array Array في عنصر التكوين: ["@qq.com" ، "qq2.com" ، "@gmail.com" ، "@126.com" ، "@163.com" ، "@hotmail.com" ، "@yahoo.com" ، "@yahoo.com" .cn. صناديق البريد.
الوظائف المنفذة هي كما يلي:
1. يدعم لوحة المفاتيح لأعلى ولأسفل ، ويدعم النقر فوق الماوس واضغط على Enter.
2. عند النقر فوق المستند ، يتم إخفاء المربع المنسدلة باستثناء مربع الإدخال الحالي. عند اتباع الإدخال ، يتم تنفيذ المطابقة التلقائية والعمليات الأخرى.
ناهيك عن التفاصيل ، فهي تشبه وظيفة مطالبة البريد الإلكتروني التلقائي عند التسجيل عبر الإنترنت. إذا كان هناك أي أخطاء ، فيمكنك ترك رسالة لي ، لذلك لن أخوض في التفاصيل!
رمز CSS كما يلي:
انسخ الرمز على النحو التالي: <style>
*{الهامش: 0 ؛ حشو: 0 ؛}
ul ، li {list-style: none ؛}
.inputelem {width: 198px ؛ الارتفاع: 22px ؛ خط الذروة: 22px ؛ الحدود: 1px صلبة #ff4455 ؛}
.ParentCls {Width: 200px ؛}
.Auto-tip li {width: 100 ٪ ؛ الارتفاع: 22px ؛ خط الارتفاع: 22px ؛ حجم الخط: 14px ؛}
.auto-tip li.hoverbg {background: #ddd ؛ المؤشر: مؤشر ؛}
.red {color: red ؛}
.hidden {display: none ؛}
</style>
انقر هنا لتنزيل رمز البريد الإلكتروني complete.js.
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.