Watermark for textbox

by maxim75

HTML

<input type="text" id="UserSearch" />

JavaScript

(function($) {
var map=new Array();
$.Watermark = {
    ShowAll:function(){
        for (var i=0;i<map.length;i++){
            if(map[i].obj.val()==""){
                map[i].obj.val(map[i].text);                    
                map[i].obj.css("color",map[i].WatermarkColor);
            }else{
                map[i].obj.css("color",map[i].DefaultColor);
            }
        }
    },
    HideAll:function(){
        for (var i=0;i<map.length;i++){
            if(map[i].obj.val()==map[i].text)
                map[i].obj.val("");                 
        }
    }
}

$.fn.Watermark = function(text,color) {
    if(!color)
        color="#aaa";
    return this.each(
        function(){     
            var input=$(this);
            var defaultColor=input.css("color");
            map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
            function clearMessage(){
                if(input.val()==text)
                    input.val("");
                input.css("color",defaultColor);
            }

            function insertMessage(){
                if(input.val().length==0 || input.val()==text){
                    input.val(text);
                    input.css("color",color);   
                }else
                    input.css("color",defaultColor);                
            }

            input.focus(clearMessage);
            input.blur(insertMessage);                              
            input.change(insertMessage);

            insertMessage();
        }
    );
};
 })(jQuery);

$('#UserSearch').Watermark("Search term", "#ccc");