Feb 4

Written by:
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!