JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<input id="first" name="fname" placeholder="First Name" />
<input id="last" name="lname" placeholder="Last Name" />
<input id="email" name="email" placeholder="[email protected]" />

JavaScript

var i,
    inputElem = document.createElement('input'),
    docInputs = document.getElementsByTagName('input');
    
if (inputElem.placeholder !== undefined || docInputs.length < 1) {
    return;
}

function makeHandler(i, f) {
    return function () {
        f(docInputs[i], docInputs[i].getAttribute('placeholder'));
    };
}
function removePlaceholder(element, placeholder) {
    if (element.value === placeholder) {
        element.value = "";
    }
}
function addPlaceholder(element, placeholder) {
    if (element.value === "") {
        element.value = placeholder;
    }
}
for (i = 0; i < docInputs.length; i++) {
    if (docInputs[i].getAttribute('test')) {
        addPlaceholder(docInputs[i], docInputs[i].getAttribute('test'));
        docInputs[i].onfocus = makeHandler(i, removePlaceholder);
        docInputs[i].onblur = makeHandler(i, addPlaceholder);
    }
}