asmodeus94

placeholderFor<=IE9

Nov 2nd, 2014
170
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Author: Radosław Adamowicz
  2.  
  3. (function($)
  4. {
  5.     $.fn.placeholder = function(styles) // defines styles for pseudo-placeholder, like for example opacity, color, weight etc.
  6.     {
  7.         var helper  = {
  8.             styles : null,
  9.  
  10.             checkPlaceholderSupport : function() // check if placeholder is working
  11.             {
  12.                 var test = document.createElement('input');
  13.                 return ('placeholder' in test);
  14.             },
  15.             placeholder : function(handle) // put text cursor on the beginning
  16.             {
  17.                 var pU = handle.createTextRange();
  18.                 pU.collapse(true);
  19.                 pU.select();
  20.             },
  21.             cssChanger : function(handle, switcher)
  22.             {
  23.                 if(typeof helper.styles === 'object')
  24.                 {
  25.                     if(switcher == 'create')
  26.                         handle.css(styles);
  27.                        
  28.                     else if(switcher == 'remove')
  29.                         handle.removeAttr('style');
  30.                 }
  31.             },
  32.         };
  33.        
  34.         helper.styles = styles;
  35.         if(helper.checkPlaceholderSupport())
  36.             return false;
  37.        
  38.         $(this).find('[placeholder]').each(function()
  39.         {
  40.             $ele = $(this);
  41.            
  42.             $placeholder = $ele.attr('placeholder');
  43.             if($placeholder == '')
  44.                 return false;
  45.            
  46.             $ifPassword = $ele.attr('type');
  47.             $ele.data('type', $ifPassword);
  48.             if($ifPassword == 'password') // check if type == password
  49.                 $($ele.attr('type', 'text'));
  50.                
  51.             $ele.data('placeholder', $placeholder);
  52.             helper.cssChanger($ele, 'create');
  53.            
  54.             $ele.val($placeholder);
  55.  
  56.             $ele.on('focus, click', function()
  57.             {
  58.                 if($(this).val() == $(this).data('placeholder'))
  59.                     helper.placeholder(this);
  60.             }).on('keydown', function()
  61.             {
  62.                 if($(this).val() == $(this).data('placeholder'))
  63.                 {
  64.                     helper.cssChanger($(this), 'remove');
  65.                     $(this).val('');
  66.                        
  67.                     if($(this).data('type') == 'password')
  68.                         $(this).attr('type', 'password');
  69.                 }
  70.             }).on('keyup', function()
  71.             {
  72.                 if($(this).val() == '')
  73.                 {
  74.                     helper.cssChanger($(this), 'create');
  75.                     $(this).val($(this).data('placeholder'));
  76.                    
  77.                     if($(this).data('type') == 'password' && $(this).attr('type') == 'password')
  78.                         $(this).attr('type', 'text');
  79.                        
  80.                     helper.placeholder(this);
  81.                 }
  82.             }).on('blur', function()
  83.             {
  84.                 if($(this).val() == '')
  85.                 {
  86.                     helper.cssChanger($(this), 'create');
  87.                     if($(this).data('type') == 'password' && $(this).attr('type') == 'password')
  88.                         $(this).attr('type', 'text');
  89.                        
  90.                     $(this).val($(this).data('placeholder'));
  91.                 }
  92.             });
  93.             $ele.parents('form').on('submit', function()
  94.             {
  95.                 $(this).find('[placeholder]').each(function()
  96.                 {
  97.                     helper.cssChanger($(this), 'remove');
  98.                     if($(this).val() == $(this).data('placeholder'))
  99.                         $(this).val('');
  100.                 });
  101.             });
  102.         });
  103.         return this;
  104.     }
  105. })(jQuery);
  106. $(function()
  107. {
  108.     $('body').placeholder();
  109. });
Advertisement
Add Comment
Please, Sign In to add comment