استخدم تخطيط bootstrap لإضافة أيقونة واضح بنقرة واحدة في مربع الإدخال ، مثل أيقونة Clear بنقرة واحدة في مربع إدخال اسم تسجيل الدخول وأيقونة العين الصغيرة التي تعرض كلمة المرور في مربع إدخال كلمة المرور ، كما هو موضح في الشكل أدناه:
ومع ذلك ، عند وضع الرموز في مربع الإدخال ، لا يمكن لهذه الرموز الصغيرة الحصول على أحداث النقر ؛
لذا فإن السؤال هو ، كيف يمكن أن تحصل هذه الرموز الصغيرة على أحداث النقر؟
لا أعرف ، لكن يمكنني استخدام طريقة دوار لتنفيذ هذه الوظيفة بشكل غير مباشر .
*** النقطة الأساسية هي:
الحل: أضف عنصرًا غير مرئي إلى موضع الرمز الصغير ، ويغطي حجم العنصر فقط الرمز الصغير ، ولكن لا يوجد لون خلفية وحدود ؛ يعادل تغطية الرمز الصغير مع لحاف شفاف.
انسخ الرمز على النحو التالي: <div>
<span> <i> </i> </span>
<type type = "text" placeholder = "حساب/رقم الهاتف المحمول/البريد الإلكتروني" id = "username">
<span style = "display: inline block ؛"> </span> <-عنصر رمز صغير->
<span style = "display: inline block ؛ الحدود: 1 بكسل صلب أحمر ؛ العرض: 30px ؛ الارتفاع: 30px ؛ الموضع: المطلق ؛ اليمين: 2px ؛ z-index: 100 ؛ مؤشر:"> </span> <-عناصر فوق الأيقونة الصغيرة->
</div>
أضف أحداثًا إلى هذا العنصر المتراكب على الرمز الصغير. وظيفة الرمز الصغير هي فقط لعرض واختباء حسب الحاجة ؛
هذا يتحقق بشكل غير مباشر. هل تأثير النقر للأيقونة الصغيرة حل رائع؟ شكرًا لك على قراءتك ، وآمل أن يساعدك في حل المشكلة بسلاسة.
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي