Tag Cloud


Powered by Easytagcloud v2.1


A simple example on how to use Onblur and onFocus in HTML using Javascript PDF Print E-mail
User Rating: / 40
PoorBest 
Written by Arpit Sharma   
Monday, 04 July 2011 00:05

The below example shows how to use OnFocus and OnBlur events in HTML using Javascript , we have used two fields 'username' and 'password' for these two events  , now when user enters the password the focus is on and when he does not enter any thing onblur event is fired and the feild is null then puts it back to default and same happens if default value is entered.

 

In the below example we have also added validation check on submit button click so that these two text boxes are filled correctly


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Array Test</title>
</head>
<script language="javascript">



function checkFocus(textValue)
{
if(textValue=="username")
	{
		var check = document.getElementById("usernameenter").value;
		//alert (check);
		document.getElementById("usernameenter").value="";
	}	
else
	{
		var check = document.getElementById("passwordenter").value;
		//alert (check);
		document.getElementById("passwordenter").value="";
	}
}

function doBlur(textValue)
{
	if(document.getElementById("usernameenter").value== "")
	{
		document.getElementById("usernameenter").value= "username";
	}
	if(document.getElementById("passwordenter").value== "")
	{
		document.getElementById("passwordenter").value= "password";
	}
}

function checkValidations()
{
if(document.getElementById("usernameenter").value== "username")
	{
		alert("Please enter Username");
		return false;
	}
	else if(document.getElementById("passwordenter").value== "Password")
	{
		alert("Please enter Password");
		return false;
	}
	else
	{
		return true;
	}
}
</script>
<body>

<form action="abcd.html" name="form1" method="post">
<table>
<tr>
	<td>
    	Enter Username : 
	</td>
    <td>
    	<input type="text" id="usernameenter" name="username" value="username" onfocus="checkFocus(this.value)" onblur="doBlur(this.value)" /> 
	</td>
</tr>
	
	
<tr>
	<td>
    	Enter Password  :
	</td>
    <td>
    	<input type="password" id="passwordenter" name="password" value="Password" onblur="doBlur(this.value)" onfocus="checkFocus(this.value)" /> 
	</td>
</tr>
<tr>
	
    <td>
    	<input type="submit" value="Submit" onclick="return checkValidations()" />
	</td>
</tr>

</table>
</form>
</body>
</html>
 


rssfeed
Email Drucken Favoriten Twitter Facebook Myspace Stumbleupon Digg MR. Wong Technorati aol blogger google reddit YahooWebSzenario

blog comments powered by Disqus
Last Updated on Monday, 04 July 2011 00:44
 
Tech Uncle, Copyright 2011 - 13 Techuncle.com . All rights reserved.
Subscribe to our RSS feeds
Find us on YouTube
Follow Us On Twitter