Advertisements

Archive

Posts Tagged ‘How do I display watermark in textboxes?’

Create water mark text box in asp.net/C# using javascript within a single step

February 23, 2012 3 comments

How to create a water mark text box in asp.net/C# using javascript 

In some scenario in the project, we need to implement water mark text for each textboxes in the form. It will help user to give right direction to enter proper and valid entries for each textboxes. We can achieve this water mark text boxes easily by using javascript methods.

Javascript method to create water mark text boxes in ASP.Net/C# using javascript

Here we are going to create a small asp.net application to show example of water mark text box creation. In aspx page we are having a textbox for username and a button. In the textbox it will show ‘Enter username’ as water mark style with gray color. When a user click mouse on to the textbox it will hide. Once the user leave the mouse pointer from the textbox without enter any data, it will display water mark text.

ASPX PAGE WITH JAVASCRIPT FOR WATER MARK TEXTBOX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>Watermark Textbox Using JavaScript</title>
 <script language="javascript" type="text/javascript">
 function WaterMark(txtName, event) {
 var defaultText = "Enter Username";
 // Condition to check textbox length and event type
 if (txtName.value.length == 0 & event.type == "blur") {
 //if condition true then setting text color 
 //and default text in textbox
 txtName.style.color = "Gray";
 txtName.value = defaultText;
 }
// Condition to check textbox value and event type
 if (txtName.value == defaultText & event.type == "focus") {
 txtName.style.color = "black";
 txtName.value = "";
 }
 }
function WaterMarkPwd(txtName, Password) {
 var defaultText = "Enter Password";
 // Condition to check textbox length and event type
 if (txtName.value.length == 0 & event.type == "blur") {
 //if condition true then setting text color and 
 //default text in textbox
 txtName.style.color = "Gray";
 txtName.value = defaultText;
 }
// Condition to check textbox value and event type
 if (txtName.value == defaultText & event.type == "focus") {
 txtName.style.color = "black";
 txtName.value = "";
 }
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <b>UserName:</b>
 <asp:TextBox ID="txtUserName" runat="server" Text="Enter Username" ForeColor="Gray"
 onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />
 <asp:Button runat="server" ID="btnLogin" Text="Login" />
 </div>
 </form>
</body>
</html>
Advertisements
%d bloggers like this: