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

Hans design5 at softflow.co.uk
Thu Mar 25 08:36:38 CDT 2010


Thursday, March 18, 2010, 12:17:28 PM, Sebastian Schneider wrote:

> 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.

What you want to do will require javascript being enabled.
Best to use the 'onfocus' event (which is part of javascript).
You could look at the search box used by TriadSkin,
http://www.pmwiki.org/wiki/Cookbook/TriadSkin
The code is bundled with the skin, called searchbox2.php.
The 'onfocus' event handling is hardcoded, so there is no way
someone could inject javascript code via the searchbox markup.

The TriadSkin searchbox reads 'Search' in the box, and 'Go' on the
button. When the box gets focus (clicking on it, tabbing to it),
'Search' is replaced by the cursor to type in the search term.
Shifting focus elsewhere will return 'Search' as the value in the box.
This is simple javascript.


  ~Hans




More information about the pmwiki-users mailing list