[pmwiki-users] searchbox that clears

[adam overton]

oops! i'm on digest so I missed your speedy msgs, Petko!
thanks for both suggestions! even if the first one doesn't work, i had no idea before you wrote that that was possible with CSS, so very wonderful to know. i guess a possible solution for that might be to not include a submit button, forcing the user to click enter to submit their search?

thanks for the help!
adam


On 9 Apr 2012, at 12:20 AM, pmwiki-users-request at pmichaud.com wrote:

> 
> Message: 2
> Date: Mon, 09 Apr 2012 08:56:02 +0200
> From: Petko Yotov <5ko at 5ko.fr>
> To: pmwiki-users at pmichaud.com
> Subject: Re: [pmwiki-users] searchbox that clears
> Message-ID: <13755728.oYuCmNNJ6D at pc4>
> Content-Type: text/plain; charset="us-ascii"
> 
> On Sunday 08 April 2012 17:58:24 adam overton wrote:
>> i want to make a searchbox that says "search" in the field, but that then
>> automatically clears when it's clicked upon. i only want this for the
>> searchbox on some pages, not all.
>> 
>> is there away to make this happen with (:searchbox:)? or with regular
>> (:input:)'s? i can't figure it out.
> 
> I have been using a quick fix in CSS, not in JavaScript. I have this code in 
> my file pmwiki/pub/css/local.css:
> 
>  input.searchbox { background: none;}
>  input.searchbox[value=""] {
>    background: url("search-bg.png")  .4em 50% no-repeat;}
>  input.searchbox:focus { background: none;}
> 
> I have a small background picture with the word "Search" in the same directory 
> as local.css. My file search-bg.png is attached, you can create your own.
> 
> This adds the background+clear thing to all searchboxes. To only have it on 
> some pages, wrap the (:searchbox:) directive in a named div, for example:
> 
>>> clearbox<<
>  (:searchbox:)
>>> <<
> 
> then, in local.css, insert "div.clearbox" before all "input.searchbox":
>  div.clearbox input.searchbox { background: none;} /*etc.*/
> 
> I haven't yet found the time to look into a JavaScript implementation.
> 
> Petko
> -------------- next part --------------
> A non-text attachment was scrubbed...
> Name: search-bg.png
> Type: image/png
> Size: 1041 bytes
> Desc: not available
> URL: <http://www.pmichaud.com/pipermail/pmwiki-users/attachments/20120409/56b40bac/attachment-0001.png>
> 
> ------------------------------
> 
> 



> Message: 4
> Date: Mon, 09 Apr 2012 09:10:14 +0200
> From: Petko Yotov <5ko at 5ko.fr>
> To: pmwiki-users at pmichaud.com
> Subject: Re: [pmwiki-users] searchbox that clears
> Message-ID: <3389501.QYnzzyaaXx at pc4>
> Content-Type: text/plain; charset="us-ascii"
> 
> On Monday 09 April 2012 08:56:02 Petko Yotov wrote:
>> I have been using a quick fix in CSS, not in JavaScript.
> 
> I just found an inconvenience with this code. If you type something, then 
> click out of the search box, the background reapears. :-/ 
> 
> Petko
> 
> 
> 
> 
> ------------------------------
> 
> Message: 5
> Date: Mon, 09 Apr 2012 09:15:48 +0200
> From: Petko Yotov <5ko at 5ko.fr>
> To: pmwiki-users at pmichaud.com
> Subject: Re: [pmwiki-users] searchbox that clears
> Message-ID: <4225206.jAOZCdykWG at pc4>
> Content-Type: text/plain; charset="us-ascii"
> 
> On Monday 09 April 2012 00:05:52 adam overton wrote:
>> 	onfocus=\"if(this.getAttribute('class').indexOf('clear')!=-1)
>> holdValue=this.value; this.value=''\"
>> onblur=\"if(this.getAttribute('class').indexOf('clear')!=-1)
>> this.value=holdValue;\" />";
> 
> A small information: you don't need to store and hold the default value, you 
> can use this.defaultValue. Additionnally, you may not want to wipe the field 
> if a user whote something in it:
> 
>  if(this.value=='') this.value=this.defaultValue;
> 
> Petko
> 
>