|
|
Showing help text by using onfocus and onBlur event triggersSome 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 of the code
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>
Found anything wrong or wants to improve the code by adding more features? Post your short comment here or use the Forum
| |
| |
|
|
|
|
|
