| |
|
Showing help text by using onfocus and onBlur event triggers |
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.
Here is the demo
Your Userid
Your Password
Your full name
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>
| |
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|
| JavaScript Tutorials |
| Popular Tutorials |
|
| Drop down list |
| Timer function |
| JavaScript Tutorials |
|
| String |
| Array |
| Date & Time |
| Form Validation |
| Event Handling |
| Math Functions |
| Loops & structure |
| JavaScript Forum |
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|
