<style type="text/css">
.WaterMarkedTextBox
{
height: 16px;
width: 168px;
padding: 2px 2 2 2px;
border: 1px solid #BEBEBE;
background-color: #F0F8FF;
color: gray;
font-size: 8pt;
text-align: center;
}
.WaterMarkedTextBoxPSW
{
background-position: center;
height: 16px;
width: 168px;
padding: 2px 2 2 2px;
border: 1px solid #BEBEBE;
background-color: #F0F8FF;
color: white;
vertical-align: middle;
text-align: right;
background-image: url(Images/psw_wMark.png);
background-repeat: no-repeat;
}
.NormalTextBox
{
height: 16px;
width: 168px;
}
</style>
<script language="javascript" type="text/javascript">
function Focus(objname, waterMarkText) {
obj = document.getElementById(objname);
if (obj.value == waterMarkText) {
obj.value = "";
obj.className = "NormalTextBox";
if (obj.value == "User ID" || obj.value == ""
|| obj.value == null) {
obj.style.color = "black";
}
}
}
function Blur(objname, waterMarkText) {
obj = document.getElementById(objname);
if (obj.value == "")
{
obj.value = waterMarkText;
if (objname != "txtPwd")
{
obj.className = "WaterMarkedTextBox";
}
else {
obj.className = "WaterMarkedTextBoxPSW";
}
}
else {
obj.className = "NormalTextBox";
}
if (obj.value == "User
ID" || obj.value == ""
|| obj.value == null) {
obj.style.color = "gray";
}
}
</script>
<body>
<form id="form2" runat="server">
<div>
<h3>
Watermark Textbox using JavaScript and CSS</h3>
</div>
<table>
<tr>
<td>
User Id
</td>
<td>
<asp:TextBox ID="txtUserId"
runat="server"
onfocus="Focus(this.id,'User
ID')"
onblur="Blur(this.id,'User
ID')"
Width="126px" CssClass="WaterMarkedTextBox">User ID</asp:TextBox>
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<asp:TextBox ID="txtPwd" TextMode="Password"
runat="server"
onfocus="Focus(this.id,'')"
onblur="Blur(this.id,'')"
Width="126px"
CssClass="WaterMarkedTextBoxPSW"
/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1"
runat="server"
Text="Submit"
/>
</td>
</tr>
</table>
</form>
</body>
Image
No comments:
Post a Comment