JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jquery/sizzle/master/sizzle.js"></script>
<form>
    <input type="text" placeholder="testando">
    <input type="submit" value="teste" name="campo">
</form>

CSS

body{
    padding:20px;
}
input{
    padding:5px;
    color:#999;
    border:2px solid #999;
}
input:focus{
    color:#333;
}

JavaScript

var Placeholder = {};

Placeholder = {
    listen: function(e) {
        e.onfocus = function() {
            Placeholder.refresh(this);
        };
        e.onblur = e.onfocus;
    },
    refresh: function(element) {
        var e = (typeof element == "object") ? [element] : Sizzle('[data-placeholder]');
        for (var i in e) {
            var cur = e[i];
            if (cur.value == cur.getAttribute('data-placeholder') && (typeof element == "object")) {
                cur.value = "";
            } else if (!cur.value) {
                cur.value = cur.getAttribute('data-placeholder');
            }
        }
    },
    init: function(selector, text) {
        var e = Sizzle(selector);
        for (var i in e) {
            e[i].setAttribute('data-placeholder', text);
            Placeholder.listen(e[i]);
        }
        Placeholder.refresh(false);
    }
};


$(document).ready(function(){
 $('form').submit(console.log($('form').serializeArray());return false;);
});