JSFiddle - React, Tailwind, and code Playground

by wolfpackt99

HTML

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<input type='text' placeholder='[email protected]'/><br/>
<input type='text' placeholder='[email protected]'/><br/>
<input type='text' placeholder='[email protected]'/><br/>
<input type='text' placeholder='[email protected]'/><br/>

CSS

<style>
.placeholder {
    color: #999;
}
.form ul {
    list-style: none;
}
.form label {
    display: block;
    font-weight: bold;
}
.form input[type=text] {
    width: 500px;
}
.form textarea {
    width: 500px;
    height: 100px;
}
</style>

JavaScript

$(function() {
    if (!Modernizr.input.placeholder) {
        // set placeholder values
        $(this).find('[placeholder]').each(function() {
            if ($(this).val() == '') // if field is empty
            {
                $(this).val($(this).attr('placeholder'));
            }
        });

        // focus and blur of placeholders
        $('[placeholder]').focus(function() {
            if ($(this).val() == $(this).attr('placeholder')) {
                $(this).val('');
                $(this).removeClass('placeholder');
            }
        }).blur(function() {
            if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder')) {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
        });

        // remove placeholders on submit
        $('[placeholder]').closest('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr('placeholder')) {
                    $(this).val('');
                }
            })
        });
    }
});