andrew4582

Watermark jquery

Aug 5th, 2012
159
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * Copyright (c) 2007 Josh Bush (digitalbush.com)
  3.  
  4.  //Example: jQuery Document Ready -- pass a function to $()
  5.  jQuery(function($){
  6.    $("#first").Watermark("First");
  7.    $("#mi").Watermark("MI");
  8.    $("#last").Watermark("Last");
  9.    $("#suffix").Watermark("Suffix");
  10. });
  11.  
  12. //Optionally, if you are not satisfied with the default gray watermark color, you may pass a second argument to the watermark function.
  13. jQuery(function($){
  14.    $("#suffix").Watermark("Suffix","#369");
  15. });
  16.  
  17. //Finally, once you are ready to pull data from your watermarked input boxes, you can clear all of the watermarks and then replace them after you are finished.
  18. function UseData(){
  19.    $.Watermark.HideAll();
  20.    //Do Stuff
  21.    $.Watermark.ShowAll();
  22. }
  23.  
  24. */
  25.  
  26. (function($) {
  27.     var map=new Array();
  28.     $.Watermark = {
  29.         ShowAll:function(){
  30.             for (var i=0;i<map.length;i++){
  31.                 if(map[i].obj.val()==""){
  32.                     map[i].obj.val(map[i].text);                   
  33.                     map[i].obj.css("color",map[i].WatermarkColor);
  34.                 }else{
  35.                     map[i].obj.css("color",map[i].DefaultColor);
  36.                 }
  37.             }
  38.         },
  39.         HideAll:function(){
  40.             for (var i=0;i<map.length;i++){
  41.                 if(map[i].obj.val()==map[i].text)
  42.                     map[i].obj.val("");                
  43.             }
  44.         }
  45.     }
  46.    
  47.     $.fn.Watermark = function(text,color) {
  48.         if(!color)
  49.             color="#aaa";
  50.         return this.each(
  51.             function(){    
  52.                 var input=$(this);
  53.                 var defaultColor=input.css("color");
  54.                 map[map.length]={text:text,obj:input,DefaultColor:defaultColor,WatermarkColor:color};
  55.                 function clearMessage(){
  56.                     if(input.val()==text)
  57.                         input.val("");
  58.                     input.css("color",defaultColor);
  59.                 }
  60.  
  61.                 function insertMessage(){
  62.                     if(input.val().length==0 || input.val()==text){
  63.                         input.val(text);
  64.                         input.css("color",color);  
  65.                     }else
  66.                         input.css("color",defaultColor);               
  67.                 }
  68.  
  69.                 input.focus(clearMessage);
  70.                 input.blur(insertMessage);                             
  71.                 input.change(insertMessage);
  72.                
  73.                 insertMessage();
  74.             }
  75.         );
  76.     };
  77. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment