🌹🖤
كيف اخصص علامة ايقونة معينة لحذف النص المدخل في صندوق البحث
في الحقيقة يمكنك إختصار الكثير من الجهد بمجرد إستعمال حقل الإدخال من النوع search كالتالي :
<input type="search" />
سيقوم هذا بتوفير حقل نصي مرفقا بعلامة الحذف جانب الحقل لمحو محتوياته أو إعادة إدخال نص جديد .
سيكون كل هذا بدلا عن :
- إنشاء هيكلية كالتالي :
<input type="text" id="text_input"/> <i class="fa fa-close"></i>
- إضافة بعض التنسيقات لجعل الأيقونة تتموضع في أحد جوانب الحقل .
- عند الضغط على الأيقونة يتم تحديد الحقل المستهدف و حذف محتوياته :
$('i.fa-close').on('click' , function(){ $('#text_input').val(''); });
هل يمكن تصميم علامة الحذف التي في النوع search ؟
نعم يمكنك ذلك , لكن الأمر غير منطقي كونه يمكن عمل ذات الفكرة بشيفرة أقل . هل يمكن معرفة الهدف وراء ذلك ؟
هل يمكن معرفة الهدف وراء ذلك ؟
اذا قمت باستخدام type="text"فعندها يجب احضار صورة ما لاستخدامها
بينما الtype="search" الايقونة موجودة فقط علي ان اصممها 🌹
يمكن تخصيص الشيفرة حتى تتلائم وفق حاجتك و مطلوبك .
و لنقل مثلا أننا نريد تغيير الأيقونة من علامة X إلى أيقونة سلة مهملات للحذف , لنقم بتعريف الهيكلية التالية :
<div class="input-container"> <input type="text" id="text_input"/> <i class="fa fa-trash"></i> </div>
ثم لنقم بضبط تموضع الأيقونة في مكان مناسب بإضافة بعض التنسيقات :
.input-container{ position: relative; } input#text_input { width: 100%; height: 100%; } i{ position: absolute; top: 0; left: 4px; }
و أخيرا إضافة التفاعلية المطلوبة :
$('i.fa-trash').on('click' , function(){ $('#text_input').val(''); });
سيمكنك بهذا عمل الكثير من الأفكار , من مثل تخصيص الأيقونة أو تغييرها إلى صورة أو غيرها ..
التعليقات