JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<input type="text" name="jam" value="ddd" aplaceholder="jam" />
<input type="text" name="elephants" aplaceholder="elephants" />
<input type="text" name="peanuts" aplaceholder="peanuts" />

JavaScript

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

        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();
})();