HTML onfocus Event Attribute - Playground Example

<!DOCTYPE html> 
  <html> 
    <head>
      <title>onfocus event</title> 
    </head> 
    <body> 
    <p>Click on the field, and then next to it. When you click on an element, due to the onfocus event attribute, the script is triggered when the element receives focus, and thanks to the onblur event attribute, the script is launched when the focus is lost.</p> 
    <input type="text" name="testInput" id="testInput" onblur="blurFunction()" onfocus="focusFunction()"> 
<script> 
function blurFunction() { 
  document.getElementById("testInput").style.background="khaki"; 
} 
function focusFunction() { 
  document.getElementById("testInput").style.background="red"; 
} 
</script> 
  </body> 
</html>