Here I will explain how to create a watermark text in asp.net using javascript.
Open Visual studio > click on file menu> open new website> give it to name> click on ok button
Run your Project and test it.
Open Visual studio > click on file menu> open new website> give it to name> click on ok button
Design your aspx page like as below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Watermark Using JavaScript</title>
<script language="javascript" type="text/javascript">
function waterMark(objtext, event) {
var defaultText = "Enter
User_name Here";
var defaultpwdText = "Enter
Your Password Here";
if (objtext.id == "txtUserName"
|| objtext.id == "txtPwd") {
if (objtext.value.length == 0 & event.type == "blur") {
if (objtext.id == "txtUserName")
{
objtext.style.color = "Gray";
objtext.value = defaultText;
}
if (objtext.id == "txtPwd")
{
document.getElementById("<%= txtTempPwd.ClientID %>").style.display
= "block";
objtext.style.display = "none";
}
}
}
// Condition to check textbox
value and event type
if ((objtext.value == defaultText || objtext.value ==
defaultpwdText) & event.type == "focus")
{
if (objtext.id == "txtUserName")
{
objtext.style.color = "black";
objtext.value = "";
}
if (objtext.id == "txtTempPwd")
{
objtext.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="Enter
Username Here" 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="Enter Your Password Here" runat="server" onfocus="waterMark(this, event);" Width="150px"
ForeColor="Gray"
/>
<asp:TextBox ID="txtPwd"
TextMode="Password"
Text="Enter
Your Password Here" runat="server" Width="150px" Style="display:none" onblur="waterMark(this, event);"/>
</td>
</tr>
</table>
</form>
</body>
</html>Run your Project and test it.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.