معهد خبراء بلوجر - كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

صفحة 1 من 2

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)

- طلبات الدعم الفني (https://www.bloggerexp.com/forumdisplay.php?f=12)

- - كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث (https://www.bloggerexp.com/showthread.php?t=7404)

مـدونـجـي

05-04-2013 06:05 PM

كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

كود البحث داخل مدونتي هو :

كود:

<style type='text/css'>

#w2b-searchbox{background:url() no-repeat scroll center center transparent;float:right;;width:307px;height:50px;disaply:block;margin:2px 30px 0 0}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px; font: bold 13px Merriweather;color:#000000;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>   

<div id='w2b-searchbox'>

<form action='/search' id='w2b-searchform' method='get'>

    <input id='s' name='q' type='text' value='search'/>

    <input id='sbutton' src='http://img1.blogblog.com/img/blank.gif' type='image'/>

</form>

</div>

كلمة search المعلمة بالأحمر هي التي تظهر داخل مربع البحث, لكن تحتاج إلى مسحها قبل كتابة الكلمة المفتاحية المطلوبة, و ما أريده هو أن تظهر كلمة search , لكن أن تختفي تلقائيا بمجرد النقر داخل مربع البحث دون الحاجة لمسحها قبل كتابة الكلمة المفتاحية.

ما هو التغيير المطلوب لذلك ؟

3li	05-04-2013 08:49 PM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

اهلا اخي

جرب استبدل

كود PHP:


		
			
<form action='/search' id='w2b-searchform' method='get'>
    <input id='s' name='q' type='text' value='search'/>
    <input id='sbutton' src='http://img1.blogblog.com/img/blank.gif' type='image'/>
</form>

استبدلو بـ

كود PHP:


		
			
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search games....'/>
</form>

وان شاء الله بيضبط معك

مـدونـجـي

05-04-2013 09:37 PM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

شكراً أخي علي.

استبدلت الكود, و أصبح نص البحث متلاشي و يختفي بمجرد النقر على المستطيل لكن المشكلة أن هناك مستطيل بحث جديد ظهر إلى جوار المستطيل الأصلي للبحث و تعطل المستطيل الاول عن العمل !

3li	05-04-2013 09:50 PM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

يمكن انت واضع الكود بطريقة خطأ او شيئ , لاني جربت الكود وضبط معي

الأن استبدل كل الكود اللي انت وضعتو بمشاركتك الأولى بالكود التالي

كود PHP:


		
			
<style type='text/css'>
#w2b-searchbox{background:url() no-repeat scroll center center transparent;float:right;;width:307px;height:50px;disaply:block;margin:2px 30px 0 0}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px; font: bold 13px Merriweather;color:#000000;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id='w2b-searchbox'>
<form action='/search' id='w2b-searchform' method='get'>
    <input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='إبحث هنا ...'/>
    <input id='sbutton' src='http://img1.blogblog.com/img/blank.gif' type='image'/>
</form>
</div>

تأكد انك حددت الكود اللي وضعتو انت بالضبط واستبدلو بالكود اللي بالمشاركة هنا

مـدونـجـي

05-04-2013 10:03 PM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

نعم أخي علي الكود يعمل بالشكل المطلوب, لكني المشكلة هي أن كلمة البحث تظهر ضمن مستطيل جديد غير مستطيل البحث الأصلي و اللذي تركت رابط خلفيته فارغاً في الكود, هذا هو الكود الأصلي :

كود:

<style type='text/css'>

#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;float:right;;width:307px;height:50px;disaply:block;margin:2px 30px 0 0}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px; font: bold 13px Merriweather;color:#000000;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>   

<div id='w2b-searchbox'>

<form action='/search' id='w2b-searchform' method='get'>

    <input id='s' name='q' type='text' value='search'/>

    <input id='sbutton' src='http://img1.blogblog.com/img/blank.gif' type='image'/>

</form>

</div>

ما الحل لإظهار كلمة البحث المتلاشية ضمن المستطيل في الكود السابق, و ليس في مستطيل آخر ؟

3li	05-04-2013 10:21 PM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

طيب اخي جرب الطريقة التالية
إبحث عن
]]></b:skin>

وأضف قبلها

كود PHP:


		
			
.menusearch{width : 240px;float :left;margin:0 auto;padding:0 auto}
.searchform {margin-top:0px;display : inline-block;zoom: 1;*display : inline;padding:0;background:#EAF3FA;width : 240px;height:25px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #001946;}
.searchform input {font:italic 13px ;color:#001244;line-height:25px;height:25px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 6px 0 0;margin:0;width :  195px;height:25px;border:0px;outline: none;line-height:25px;}
.searchform .searchbutton {border:none;margin:0;padding:0;font-size:13px;height:25px;width : 27px;}

واستبدل كل الكود الأصلي اللي عندك بالكود التالي

كود PHP:


		
			
<div class='menusearch'>
<div style='float :left;padding:4px 0 0 8px;'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='إبحث هنا ...'/>
</form>
</div></div>

الأن اذا اشتغل تمام وكان اتجاه المربع على اليسار وكنت بدك يكون على اليمين
إستبدل left
بـ right

مـدونـجـي

05-04-2013 10:54 PM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

نعم أخي الكودان يعملان و لكن في حال استخدامهما سأضطر لخسارة مستيطل البحث الأصلي . أليس هنالك من طريقة للتحكم فقط في كيفية ظهور عبارة البحث داخل المستطيل الموجود أصلاً دون الحاجة لتغييره ؟

3li	05-05-2013 12:08 AM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

جرب الكود التالي بدل الكود الأصلي اللي عندك

كود:

<style type='text/css'>





#w2b-searchbox{background:url() no-repeat scroll center center transparent;float:right;;width:307px;height:50px;disaply:block;margin:2px 30px 0 0}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px; font: bold 13px Merriweather;color:#000000;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>  

<div id='w2b-searchbox'>

<form action='/search' id='w2b-searchform' method='get'>

    <input type="text" name="s" id="s" value="إبحث هنا ..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

    <input id='sbutton' src='http://img1.blogblog.com/img/blank.gif' type='image'/>

</form>

</div>

مع العلم اخي انو لم يتم تغيير اي شيئ بالكود اللي عندك الا فقط كود الكلمة

بدل السطر اللي كنت واضع فيه الكلمة باللون الأحمر

كود:

<input id='s' name='q' type='text' value='search'/>

أصبح

كود:

<input type="text" name="s" id="s" value="إبحث هنا .. " onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>

ولو وضعته داخل اداة من التخطيط رح يشتغل بالشكل المطلوب وما فيه مشاكل

المهم انت تأكد انك استبدلت الكود كامل

مـدونـجـي

05-05-2013 06:48 AM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

شكراً أخي علي, نعم باستبدال السطر قبل الأخير من الكود اصبح مستطيل البحث يظهر و داخله كلمة البحث تظهر بالشكل المطلوب, لكن المشكلة التي ظهرت الآن هي أن المستطيل لم يعد يبحث و إنما يظهر كل المواضيع بغض النظر عن كلمة البحث الموضوعة !

عماد عادل

05-05-2013 07:12 AM

رد: كيف يمكن جعل النص داخل مربع البحث يختفي بمجرد النقر داخل المربع لكتابة كلمة البحث

تصحيح للكود، هذا هو الكود الصحيح :

<input type="text" name="q" id="s" value="إبحث هنا .. " onfocus="if(this.value==this.defaultValue)this.val ue='';" onblur="if(this.value=='')this.value=this.defaultV alue;"/>
جرب الآن

الساعة الآن 05:47 PM

صفحة 1 من 2

عرض 40 مشاركات من هذا الموضوع لكل صفحة