[pmwiki-users] searchbox that clears
adam overton
a at plus1plus1plus.org
Tue Apr 10 02:04:25 CDT 2012
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
>
>
More information about the pmwiki-users
mailing list