JSFiddle - React, Tailwind, and code Playground

by jamwaffles

HTML

<input placeholder="Placeholder text">

CSS

input
{
    color: #000;
}

.placeholder
{
    color: #bbb;
}

JavaScript

$(document).ready(function() {
    $("input:text").each(function() {
        $(this).data("placeholder", $(this).attr("placeholder")).addClass("placeholder");
    });
    
    $("input:text").live("focus", function() {
        if($(this).val() == $(this).data("placeholder"))
        {
            $(this).val('').removeClass("placeholder");
        }
    });
    
    $("input:text").live("blur", function() {
        if(!$(this).val().length)
        {
            $(this).val($(this).data("placeholder")).addClass("placeholder");
        }
    });
});