JSFiddle - React, Tailwind, and code Playground

by Waruna Manjula

HTML

<input type="text" value="test1" onClick="Clear1(this.id);" id="textbox1" onblur="Clear2(this.id);">
<input type="text" value="test2" onClick="Clear1(this.id);" id="textbox2" onblur="Clear2(this.id);">
<input type="text" value="test3" onClick="Clear1(this.id);" id="textbox3" onblur="Clear2(this.id);">
<input type="text" value="test4" onClick="Clear1(this.id);" id="textbox4" onblur="Clear2(this.id);">

JavaScript

function Clear1(str)
{    
   document.getElementById(str).value= "";
}

function Clear2(str2)
{    
var aa1=document.getElementById(str2);
	if (aa1.value==""){  
    document.getElementById(str2).style.backgroundColor = "#ffcccc"; 
	}else{
    document.getElementById(str2).style.backgroundColor = "#ffffff";   
  }
}