[pmwiki-users] Searchbox: Highlight Text on Enter/Click

Petko Yotov 5ko at 5ko.fr
Sat Mar 27 09:11:48 CDT 2010


On Thursday 25 March 2010 12:46:15, Sebastian Schneider wrote :
> Hello again!
> 
> Is there really nobody out there, who can help me with my question?
> 
> Yours, Sebastian
> 
> Sebastian Schneider schrieb:
> > Hello!
> >
> > On my webpage I use the (:searchbox value="Search":) directive, which
> > allows me to set the text in the searchbox. Now what I want to do is
> > highlight/erase this text as soon as one enters the box via tabulator or
> > mouse click.
> >
> >>From what I understand there exists the html-onclick event, but I don't
> >
> > have a clue on how to integrate this. Apart from that I'd rather not use
> > JavaScript if possible.

If you really don't want to use JavaScript, you could use CSS, and define a 
background image for the searchbox text field.

1. Create a small picture file containing the word "Search" on a white 
background. Here is an example: http://5ko.fr/pub/css/search-bg.png .

2. Copy this picture on your server, to the directory pmwiki/pub/css.

3. Add to your file pmwiki/pub/css/local.css these lines:

  form.wikisearch input.searchbox {
    background: url("search-bg.png") .4em 50% no-repeat;}
  form.wikisearch input.searchbox:focus { background: none;}

If the file local.css does not exist, create it. "search-bg.png" is the name 
of the background picture, change the line if your file has a different name.

4. You don't have to use (:searchbox value=...:), just (:searchbox:).

Thanks,
Petko



More information about the pmwiki-users mailing list