JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<input type="text" onfocus="inputFocus(this, 'Name')" onblur="inputBlur(this, 'Name')" value="Name" />

JavaScript

function inputFocus(elm, placeholder) {
    if (elm.value == placeholder) {
        elm.value = ""
    }
}

function inputBlur(elm, placeholder) {
    if (elm.value == "" || elm.value == placeholder) {
        elm.style.border = "1px solid red";
        elm.value = placeholder;
        alert("Visitor name must be entered");
    } else {
        elm.style.border = "1px solid green";
    }
}