JSFiddle - React, Tailwind, and code Playground

Placeholders.js - An HTML5 placeholder attribute polyfill

by Jennifer Perrin

HTML

<input type="text" placeholder="Sample text">
    <br /><br />
<textarea placeholder="My placeholder"></textarea>

CSS

/*
#Placeholders.js - An HTML5 placeholder attribute polyfill

Placeholders.js is a polyfill (or shim, or whatever you like to call it) for the HTML5 placeholder attribute, as defined in the <a href="http://dev.w3.org/html5/spec/Overview.html#attr-input-placeholder">HTML5 draft specification</a>. Placeholder attributes are valid on `input` elements of various types and `textarea` elements.

Placeholders.js is licensed under the [MIT License](http://en.wikipedia.org/wiki/MIT_License). See the unminified file for the full license text.

##Features

 - Works on both **`input` and `textarea` elements**
 
 - Works by finding `placeholder` attributes on elements, so there's no need to call it repeatedly for every element. Just add the placeholder attribute **as if it were supported natively**.
 - **Simulates native styles** for the placeholders but keeps any custom styles you've defined on the elements
 - Placeholder values are **not submitted as form data** if the element is part of a form
 - Works for elements that are **added to the DOM after the page has loaded**, and also for elements whose placeholder value changes after the page has loaded
 - Works properly for `input` elements of the **`password` type** in all browsers except Internet Explorer 8 and below, in which the placeholder appears as masked text
 - Wide range of browsers supported, **including IE6**
 - **No dependencies** (so no need to include jQuery, unlike most placeholder polyfill scripts)
 - All of the above in just 5kB when minified, and about **1kB when gzipped**!

##How do I use it?

Placeholders.js is designed to replicate native placeholder attribute functionality as best as it can. To get it working, simply define placeholders on your `input` or `textarea` elements as usual:

    <input type="text" placeholder="Sample text">
    <textarea placeholder="My placeholder"></textarea>
    
Just include the script and call the `init` method whenever you're ready. I suggest calling it in a DOM ready...

JavaScript

var Placeholders = (function () {

    "use strict";

    /* List of input types that support the placeholder attribute. We only want to modify input elements with one of these types.
     * WARNING: If an input type is not supported by a browser, the browser will choose the default type (text) and the placeholder shim will 
     * apply */
    var validTypes = [
        "text",
        "search",
        "url",
        "tel",
        "email",
        "password",
        "number",
        "textarea"],

        //Default options, can be overridden by passing object to `init`
        settings = {
            live: false,
            hideOnFocus: false,
            className: 'placeholderspolyfill', // placeholder class name to apply to form fields
            textColor: '#999', // default placeholder text color
            styleImportant: true // add !important flag to placeholder style
        },

        //Keycodes that are not allowed when the placeholder is visible and `hideOnFocus` is `false`
        badKeys = [37, 38, 39, 40],

        //Used if `live` options is `true`
        interval,

        //Stores the input value on keydown (used when `hideOnFocus` option is `false`)
        valueKeyDown,

        // polyfill class name regexp
        classNameRegExp = new RegExp('\\b' + settings.className + '\\b');

    // The cursorToStart function attempts to jump the cursor to before the first character of input
    function cursorToStart(elem) {
        var range;
        if (elem.createTextRange) {
            range = elem.createTextRange();
            range.move("character", 0);
            range.select();
        } else if (elem.selectionStart) {
            elem.focus();
            elem.setSelectionRange(0, 0);
        }
    }

    /* The focusHandler function is executed when input elements with placeholder attributes receive a focus event. If necessary, the placeholder
     * and its associated styles are removed from the element. Must be bound to an...