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

DaveG pmwiki at solidgone.com
Thu Mar 25 09:44:07 CDT 2010

On 3/25/2010 7:46 AM, 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.
You need to use javascript to do this, and it's not a simple matter of a 
one-line piece of code. I'm going to show you this using jQuery, because 
it's easier (no cross-browser event handling issues), but it does mean 
you now have jquery on your page.

The approach is to add code which will clear the field when the user 
clicks -- this is an onfocus event. You also need to clear the field 
when the user submits the form.

Add this in config.php, adapted from 

$HTMLHeaderFmt['jquery.js']='<script type="text/javascript" 
$HTMLHeaderFmt['fieldprompt']='<script type="text/javascript">
(function($) {
jQuery.fn.clearField = function(settings) {
   settings = jQuery.extend({
     blurClass: "clearFieldBlurred",
     activeClass: "clearFieldActive"
   }, settings);
   jQuery(this).each(function() {
     var el = jQuery(this);
     if(el.attr("rel") == undefined) {
       el.attr("rel", el.val()).addClass(settings.blurClass);
     el.focus(function() {
       if(el.val() == el.attr("rel")) {
     el.parent("form").submit(function() {
       if(el.val() == el.attr("rel")) {
     el.blur(function() {
       if(el.val() == "") {
   return jQuery;
   jQuery(".wikisearch .searchbox").clearField();
</script> ';

  ~ ~ David

More information about the pmwiki-users mailing list