JSFiddle - React, Tailwind, and code Playground

by partkyle

HTML

<form>
    <input type="text" name="s" id="search" placeholder="Search..."/>
    <input type="submit" name="button" value="Submit"/>
</form>

CSS

input.placeholder {
    color: #888;   
}

JavaScript

$(function() {
    if (!("placeholder" in document.createElement('input'))) {
        $(':input[placeholder]').each(function() {
            var me = $(this);
            me.addClass('placeholder').val(me.attr('placeholder')).focus(function() {
                var that = $(this);
                if (that.val() == that.attr('placeholder')) {
                    that.val('').removeClass('placeholder');
                }
            }).blur(function() {
                var that = $(this);
                if ($.trim(that.val()).length === 0) {
                    that.val(that.attr('placeholder')).addClass('placeholder');
                }
            });
        });
        $('form:has(:input[placeholder])').each(function() {
            $(this).submit(function() {
                $(this).find(':input[placeholder]').each(function() {
                    if ($(this).val() == $(this).attr('placeholder')) {
                        $(this).val('');
                    }
                });
            });
        });
    }
});