JSFiddle - React, Tailwind, and code Playground

by Joe Pool

HTML

<table>
  <tr><td>Message:</td><td>&nbsp;</td></tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <textarea name="txtMsg" rows="6" cols="30" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;">[Write your message here or call my voice number at (555) 222-1234.]</textarea>
    </td>
  </tr>
  <tr>
    <td>Test1:</td>
      <td><input type="text" name="txtTest1" onfocus="jsOnFocus(txtTest1)" onblur="jsOnBlur(txtTest1)" value="Test1" /></td>
  </tr>
  <tr>
    <td>Test2:</td>
      <td><input type="text" name="txtTest2" onfocus="if(this.value=='Test2'){this.value=''};" value="Test2" /></td>
  </tr>
  <tr>
    <td>Test3:</td>
      <td><input type="text" name="txtTest3" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;" value="Test3" /></td>
  </tr>
</table>

JavaScript

function jsOnFocus(obj) {
    alert("Inside the jsOnFocus.");
    if (obj.Value==obj.defaultValue)
        obj.Value="";
}
function jsOnBlur(obj) {
    if (obj.Value==="")
        obj.Value=obj.defaultValue;
}