JSFiddle - React, Tailwind, and code Playground

by joshua_allanson

HTML

<form>
    <input id="text1" data-placeholder="something" type="text"/>
    <input id="text2" type="text"/>
    <input type='submit'value='submit'/>
</form>

CSS

.placeholder { color: #999; }

JavaScript

var placeholder = "I'm a placeholder";
function putPlaceholder(el) {
    // do something
    el.value = placeholder;
    $(el).addClass('placeholder');
}

$('form').each(function() {
    $(this).find(':input')
        .not('input[type=submit], input[type=hidden]')
        .each(function() {
        if (!$.trim(this.value)) {
            if ($(this).attr('data-placeholder')) {
                putPlaceholder(this);
            }
        }

        $(this).focus(function() {
            if (this.value == placeholder) {
                this.value = '';
            }
            $(this).removeClass('placeholder');
        }).blur(function() {
            if (!$.trim(this.value)) {
                putPlaceholder(this);
            }
        });
    });
});