JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<input type="text" name="jam" placeholder="jam" />
<input type="text" name="elephants" placeholder="elephants" />
<input type="text" name="peanuts" placeholder="peanuts" />

JavaScript

(function() {
    var inputs;
    var onLoad = function(el) {
        var curVal = el.value,
            placeholdVal = el.getAttribute("placeholder");
        if (!curVal) {
            el.value = placeholdVal;
        }
    };
    var onFocus = function(e) {
        var curVal = e.target.value,
            placeholdVal = e.target.getAttribute("placeholder");
        if (curVal == placeholdVal) {
            e.target.value = "";
        }
    }
    var onBlur = function(e) {
        onLoad(e.target);
    }
    var init = function() {
        inputs = document.querySelectorAll("input[placeholder]");

        for (i = 0; i < inputs.length; ++i) {
            inputs[i].addEventListener("focus", onFocus, true); //listen for focus, okay to bubble
            inputs[i].addEventListener("blur", onBlur, true); //listen for focus, okay to bubble
            onLoad.call(this, inputs[i]);
        }
    }
    init();
})();