Hi Friends, in this article I will explain about Watermark for Username and Password in
JavaScript.
I already explained in the previous articles about Marquee tag or How to Scroll Text From left to right or How to Move the Text in HTML,C#/VB.NET:Save the generated pdf directly to the server directory folder without user prompt in ASP.NET and How to open PDF File in Adobe Reader, not in Browser in ASP.NET using C#/VB.NET
I already explained in the previous articles about Marquee tag or How to Scroll Text From left to right or How to Move the Text in HTML,C#/VB.NET:Save the generated pdf directly to the server directory folder without user prompt in ASP.NET and How to open PDF File in Adobe Reader, not in Browser in ASP.NET using C#/VB.NET
We may see Watermark
textboxes in so many sites. Suppose
we take the twitter site in login page and signup page it contains Watermark textboxes .
Watermark is not working
properly for the password if we take the Textmode
as Password(TextMode="Password").For
that i take the extra textbox txtTempPwd and write the code as
following.
In previous post i explained about how to create ASP.NET website.
Take one web page(.aspx page)
Copy and Paste the below code in your web page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Watermark Textboxs for
username and Password Using JavaScript</title>
<script language="javascript" type="text/javascript">
function
WaterMark(objtxt, event) {
var
defaultText = "Username";
var
defaultpwdText = "Password";
//
Condition to check textbox length and event type
if
(objtxt.id == "txtUserName" ||
objtxt.id == "txtPwd") {
if
(objtxt.value.length == 0 & event.type == "blur")
{
//if
condition true then setting text color and default text in textbox
if
(objtxt.id == "txtUserName") {
objtxt.style.color = "Gray";
objtxt.value = defaultText;
}
if
(objtxt.id == "txtPwd") {
document.getElementById("<%=
txtTempPwd.ClientID %>").style.display
= "block";
objtxt.style.display = "none";
}
}
}
//
Condition to check textbox value and event type
if
((objtxt.value == defaultText || objtxt.value == defaultpwdText) &
event.type == "focus") {
if
(objtxt.id == "txtUserName") {
objtxt.style.color = "black";
objtxt.value = "";
}
if
(objtxt.id == "txtTempPwd") {
objtxt.style.display = "none";
document.getElementById("<%=
txtPwd.ClientID %>").style.display
= "";
document.getElementById("<%=
txtPwd.ClientID %>").focus();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><b>UserName:</b></td>
<td>
<asp:TextBox ID="txtUserName" runat="server" Text="Username" Width="150px" ForeColor="Gray" onblur
= "WaterMark(this,
event);" onfocus = "WaterMark(this,
event);" />
</td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<asp:TextBox ID="txtTempPwd" Text="Password" runat="server" onfocus="WaterMark(this, event);" Width="150px"
ForeColor="Gray"
/>
<asp:TextBox ID="txtPwd" TextMode="Password" Text="Password" runat="server" Width="150px" Style="display:none" onblur="WaterMark(this, event);"/>
</td>
</tr>
</table>
</form>
</body>
</html>
|
Then the output like below.
when we click on the textboxes then the text will disappear like below.
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."
Hi Roja,
ReplyDeleteReally nice..
Thanks for sharing…
i have one doubt,here we using two textbox for password,what purpose we used two box,then how is possible to view one textbox only after execution
ReplyDelete