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
_______________________________________________
pmwiki-users mailing list
[email protected]
http://www.pmichaud.com/mailman/listinfo/pmwiki-users
