6. onfocus

          When onblur tracks the going away of a user from an input element, onfocus tracks the opposite. onfocus, as the name implies, is when a user focuses on a form element. Focusing could mean clicking on the form element or selecting it.

          The example below shows a code with a textbox and the code uses the onfocus and onblur function together in a single element to create an interaction with the user. When onfocus is triggered, the width of the textbox is increased. When onblur is triggered, the width of the textbox is decreased and if there is no value in the textbox, the user is alerted to enter a value.

 <form>

<label for="uname">Username: </label>

<input type="text" id="uname" onfocus="myFunction1()" onblur="myFunction2()">

</form>

 <script>

function myFunction1() {

document.getElementById("uname").style.width = "100px";

}

function myFunction2() {     

var x = document.getElementById("uname");

       x.style.width = "50px";

       if (x.value == ""){

            alert("Please enter a value!");

      }

}

</script>