https://www.kasatria.com/script/jquery.html5-placeholder-shim.js

1(function($) {
2  // @todo Document this.
3  $.extend($,{ placeholder: {
4      browser_supported: function() {
5        return this._supported !== undefined ?
6          this._supported :
7          ( this._supported = !!('placeholder' in $('<input type="text">')[0]) );
8      },
9      shim: function(opts) {
10        var config = {
11          color: '#999',
12          cls: 'placeholder',
13          selector: 'input[placeholder], textarea[placeholder]'
14        };
15        $.extend(config,opts);
16        return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
17      }
18  }});
19
20  $.extend($.fn,{
21    _placeholder_shim: function(config) {
22      function calcPositionCss(target)
23      {
24        var op = $(target).offsetParent().offset();
25        var ot = $(target).offset();
26
27        return {
28          top: ot.top - op.top,
29          left: ot.left - op.left,
30          width: $(target).width()
31        };
32      }
33      function adjustToResizing(label) {
34      	var $target = label.data('target');
35      	if(typeof $target !== "undefined") {
36          label.css(calcPositionCss($target));
37          $(window).one("resize", function () { adjustToResizing(label); });
38        }
39      }
40      return this.each(function() {
41        var $this = $(this);
42
43        if( $this.is(':visible') ) {
44
45          if( $this.data('placeholder') ) {
46            var $ol = $this.data('placeholder');
47            $ol.css(calcPositionCss($this));
48            return true;
49          }
50
51          var possible_line_height = {};
52          if( !$this.is('textarea') && $this.css('height') != 'auto') {
53            possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
54          }
55
56          var ol = $('<label />')
57            .text($this.attr('placeholder'))
58            .addClass(config.cls)
59            .css($.extend({
60              position:'absolute',
61              display: 'inline',
62              float:'none',
63              overflow:'hidden',
64              textAlign: 'inherit',
65              color: config.color,
66              cursor: 'text',
67              paddingTop: $this.css('padding-top'),
68              paddingRight: $this.css('padding-right'),
69              paddingBottom: $this.css('padding-bottom'),
70              paddingLeft: $this.css('padding-left'),
71              fontSize: $this.css('font-size'),
72              fontFamily: $this.css('font-family'),
73              fontStyle: $this.css('font-style'),
74              fontWeight: $this.css('font-weight'),
75              textTransform: $this.css('text-transform'),
76              backgroundColor: 'transparent',
77              zIndex: 99
78            }, possible_line_height))
79            .css(calcPositionCss(this))
80            .attr('for', this.id)
81            .data('target',$this)
82            .click(function(){
83              $(this).data('target').focus();
84            })
85            .insertBefore(this);
86          $this
87            .data('placeholder',ol)
88            .focus(function(){
89              ol.hide();
90            }).blur(function() {
91              ol[$this.val().length ? 'hide' : 'show']();
92            }).triggerHandler('blur');
93          $(window).one("resize", function () { adjustToResizing(ol); });
94        }
95      });
96    }
97  });
98})(jQuery);
99
100jQuery(document).add(window).bind('ready load', function() {
101  if (jQuery.placeholder) {
102    jQuery.placeholder.shim();
103  }
104});
105