SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Events

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.

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>


Google+

Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked




Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer