JSFiddle - React, Tailwind, and code Playground

Placeholder UI stuff

by Jennifer Perrin

HTML

<form action="#">
    <fieldset>
        <legend>Your form</legend>
        
        <p>
            <label for="name">Name:</label>
            <input type="text" id="name" placeholder="Your name&hellip;" />
        </p>
        
        <p>
            <label for="email">Email:</label>
            <input type="email" id="email" placeholder="[email protected]" />
        </p>
        
        <p>
            <label for="url">URL:</label>
            http://<input type="url" id="url" placeholder="example.com" />
        </p>
        
        <p>
            <label for="comments">Comment:</label>
            <textarea id="comments" rows="10" cols="50" placeholder="Your comment"></textarea>
        </p>
        
    </fieldset>
</form>

CSS

/*
HOUSEKEEPING
Ignore this section
*/
html{
    font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
    color:#333;
    background:#fff;
}
legend{
    font-weight:bold;
}
label{
    position:absolute;
    left:-9999px;
}
input,
textarea{
    font:inherit;
}

/*
The magic
*/
[placeholder]{
    cursor:pointer;
    color:#999;
}
[placeholder]:active,
[placeholder]:focus{
    cursor:text;
    color:#333;
}

JavaScript

//Ignore this, this is *just* a polyfill. The point of the experiment is the UI behaviour and CSS, not the JS :)

$(document).ready(function() {

    // Plugin by @dan_bentley -- https://github.com/danbentley/placeholder
    // License free
    // Placeholder text for browsers without support for the placeholder attribute.
    
    if (!("placeholder" in document.createElement('input'))) {
        $(':input[placeholder]').each(function(index) {
            var el = $(this);
            var placeholderText = el.attr('placeholder');
            if (placeholderText) {
                el.val(placeholderText);
                el.bind('focus blur', function(e) {
                    if (e.type === 'focus' && el.val() === placeholderText) el.val(''); 
                    if (e.type === 'blur' && el.val() === '') el.val(placeholderText); 
                });
            }
        });
    }

});