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

[DaveG]

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 
http://labs.thesedays.com/projects/jquery/clearfield/:

$HTMLHeaderFmt['jquery.js']='<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>';
$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.val("").removeClass(settings.blurClass).addClass(settings.activeClass);
       }
     });
     el.parent("form").submit(function() {
       if(el.val() == el.attr("rel")) {
 
el.val("").removeClass(settings.blurClass).addClass(settings.activeClass);
       }
     });
     el.blur(function() {
       if(el.val() == "") {
 
el.val(el.attr("rel")).removeClass(settings.activeClass).addClass(settings.blurClass);
       }
     });
   });
   return jQuery;
};
})(jQuery);
$(document).ready(function(){
   jQuery(".wikisearch .searchbox").clearField();
});
</script> ';


  ~ ~ David