OnBlur & OnFocus events to Display help

Some time we will be interested in displaying some help text about the input box or radio button when we click or mouse is placed inside it. Here we will be using onfocus event to display the help text. Here to display the message we will use Layers by using div tags. Note that once the help is displayed it is to be removed when the mouse or curser comes out of the text box, so we will use onBlur event to trigger a JavaScript function when the focus is lost or mouse is taken out.

We will place three text boxes and each box will have one onfocus and onBlur events connected to a JavaScript function. The function will receive the id of the layer and the settings to display the layer or hide the layer.

demo of displaying help text

Here is the code


<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 40px;
background-color: #f1f1f1;
width: 120px;
padding: 5px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script type="text/javascript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

</head>
<body >

<form name=f1 action='' method=post>
Userid<input type=text name=t3 onfocus="setVisibility('100','inline')"; onBlur="setVisibility('100','none')";><br>
Password<input type=text name=t2 onfocus="setVisibility('101','inline')"; onBlur="setVisibility('101','none')";><br>
Name<input type=text name=t1 onfocus="setVisibility('102','inline')"; onBlur="setVisibility('102','none')";>
</form>

<div id="100">Your Userid</div>
<div id="101">Your Password</div>
<div id="102">Your full name</div>

</body>
</html>

Event Handling onMouseOver and onMouseOut

Subscribe to our YouTube Channel here

Showing help text by using onfocus and onBlur event triggers

Subscribe