Feb
4
Written by:
Larry Daniele
2/4/2010 10:06 PM
I am building another DotNetNuke website with the wonderful Flex2 skin. My client asked that the Search field have some sort of label to make it more clear what the function was. I wanted to to do what the "cool kids" do: put the text "Search" in the field when it is "empty" and then automagically remove the text when the user clicks in the box.
Since this is a DNN 5 site that has jQuery support built in, I could use a slightly modified version of this simple jQuery code from Brian Reindel (that I tucked into the skin's drnuke-height.js file that is already loaded by the skin):
/*
Doctor the DNN Search field to display the word "Search" when it's "empty"
and remove this text when the user clicks in the field.
jQuery code compliments of 5 JavaScript Tricks Made Easy with jQuery
jQuery JavaScript Samples by Brian Reindel
http://www.reindel.com/five_javascript_tricks_jquery/
*/
$(function() {
swapValues = [];
$("#dnn_dnnSEARCH_txtSearch").each(function(i){
$(this).val("Search");
swapValues[i] = $(this).val();
$(this).focus(function(){
if ($(this).val() == swapValues[i]) {
$(this).val("");
}
}).blur(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swapValues[i]);
}
});
});
});
Thanks Brian!
Tags: