Form handling onsubmit, onchange, onselect, onblur, onfocus
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>