JSFiddle - React, Tailwind, and code Playground

by petrabarus

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<input 
    type='text' 
    placeholder='Lorem ipsum dolor sit amet' 
    class="form-control" 
    id="textinput"/>

CSS

body {
    padding: 30px;
}

JavaScript

$.fn.copyCSS = function (source) {
    var dom = $(source).get(0);
    var dest = {};
    var style, prop;
    if (window.getComputedStyle) {
        var camelize = function (a, b) {
                return b.toUpperCase();
        };
        if (style = window.getComputedStyle(dom, null)) {
            var camel, val;
            if (style.length) {
                for (var i = 0, l = style.length; i < l; i++) {
                    prop = style[i];
                    camel = prop.replace(/\-([a-z])/, camelize);
                    val = style.getPropertyValue(prop);
                    dest[camel] = val;
                }
            } else {
                for (prop in style) {
                    camel = prop.replace(/\-([a-z])/, camelize);
                    val = style.getPropertyValue(prop) || style[prop];
                    dest[camel] = val;
                }
            }
            return this.css(dest);
        }
    }
    if (style = dom.currentStyle) {
        for (prop in style) {
            dest[prop] = style[prop];
        }
        return this.css(dest);
    }
    if (style = dom.style) {
        for (prop in style) {
            if (typeof style[prop] != 'function') {
                dest[prop] = style[prop];
            }
        }
    }
    return this.css(dest);
};



var textinput = $('#textinput');
var textplaceholder = $('<span>');
var placeholdertext = textinput.attr('placeholder');
textinput.attr('placeholder', '');

textplaceholder.insertAfter(textinput);
textplaceholder.html(placeholdertext);
textplaceholder.copyCSS(textinput);

textinput.keyup(function() {
    var current = $(this).val();
    if(placeholdertext.substr(0, current.length) == current){
        textplaceholder.html(placeholdertext);
    } else {
        textplaceholder.html(current);
    }
});