JSFiddle - React, Tailwind, and code Playground

by Mike Pol

HTML

<input type="password" value="" maxlength="500" placeholder="Password" />

<br /><br />

<input type="text" value="" maxlength="500" placeholder="mail" />

<br /><br />        

<input type="text" value="" maxlength="500" /> - nothing here

<br /><br />        

<input type="text" value="" maxlength="500" placeholder="Looooooooooooooooooooooooooong text" />

<br /><br />

<textarea placeholder="Textarea"></textarea>

CSS

.placeholder {
    color: #777;
    font-family: "Arial";
    font: 11px;
    font-weight: 200px;
}

JavaScript

(function($){
    $.fn.placeholder = function(options) {
        var body = $(document.body);
        this.each(function(indx, element){
            if ($(this).attr('placeholder') !== "") {
                var template = '<div class="placeholder" style="position:absolute;overflow:hidden;white-space:nowrap;cursor:text;"/>',
                    self = $(this),
                    pos = self.offset(),
                    height = self.height(),
                    width = self.width(),
                    ph_text = self.attr('placeholder'),
                    placeholder = $(template)
                                            .appendTo(self.parent())
                                            .text(ph_text)
                                            .css({
                                                top: pos.top,
                                                left: pos.left,
                                                width: width,
                                                height: height,
                                                padding: ((self.outerHeight() - height) / 2) + 'px ' +  ((self.outerWidth() - width) / 2) + 'px '
                                            });
                                            
                self.attr('placeholder','');
                
                placeholder
                    .click(function(){
                        self.focus();
                    })
                    .hover(
                        function(){
                            placeholder.css('overflow','visible');
                        },
                        function(){
                            placeholder.css('overflow','hidden');
                        }
                    );                
                
                self
                    .focus(function(){
                        if (self.val().length == 0) {
                            if ($.browser.msie)...