Saturday, August 04, 2012
Mahad Bin Mukhtar
Going to explain.. How can we use watermark on ASP.NET TextBox using Javascript ( Yes, I know we can use AJAX ControlToolkit for WaterMark),
I've answered in the forums:
http://forums.asp.net/p/1830453/5094893.aspx
It's CSS Code:
It's your Javascript Code:
It's HTML Markup of your Page.aspx (EXAMPLE)
Good Luck` Hope So, it was easy then using AJAX..
I've answered in the forums:
http://forums.asp.net/p/1830453/5094893.aspx
It's CSS Code:
<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>
It's your Javascript Code:
<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>
It's HTML Markup of your Page.aspx (EXAMPLE)
<body> <form id="form1" 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>
Good Luck` Hope So, it was easy then using AJAX..
Posted in: 
0 comments:
Post a Comment