Introduction
This article explainshow to create a water mark in a TextBox using JavaScript and also with Ajax. To do that you can use the following procedure.
Step 1
Download the Ajax control toolkit from link.
Step 2
Right-click on the standard tool box then select the "Add" tab, provide the name of the tab.
![add-tab-name.png]()
Step 3
Right-click on the new tab then choose "items" then click on the "Browse" button and browse to "AjaxControlToolLit.dll". Then click on the "OK" button.
Step 4
Right-click in the Solution Explorer then select "Add reference" then browse to "AjaxControlToolLit.dll". Then click on the "OK" button.
Step 5
Drag the "ToolKitScriptManager" on the top of your aspx page from the new tab controls.
Step 6
Then drag the "TextBoxWatermarkExtender".
Step 7
Set the TextBoxWatermarkExtender properties TargetControlID=" ", WatermarkText=" ". The "TargetControlID" property specifies the TextBox id, on which you want to set the watermark text, and "WatermarkText" accepts the text as watermark for that TextBox.
Code for TextBoxWatermarkExtender
<asp:TextBoxWatermarkExtender ID="TextBox2_TextBoxWatermarkExtender"
runat="server" TargetControlID="TextBox2" WatermarkText="Message1"></asp:TextBoxWatermarkExtender>
Full Source code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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 runat="server">
<style type="text/css">
.style2
{
width: 128px;
height: 31px;
position: absolute;
left: 27px;
top: 83px;
}
.style3
{
width: 128px;
height: 31px;
position: absolute;
left: 30px;
top: 135px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Ajax TextBox Water Mark</h3>
</div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="style2" ></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="wmr"
runat="server" TargetControlID="TextBox1" WatermarkText="Message1"></asp:TextBoxWatermarkExtender>
<p>
</p>
<p>
</p>
<p>
<asp:TextBox ID="TextBox2" runat="server" CssClass="style3" ></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBox2_TextBoxWatermarkExtender"
runat="server" TargetControlID="TextBox2" WatermarkText="Message1"></asp:TextBoxWatermarkExtender>
</p>
</form>
</body>
</html>
Step 8
Output
![Ajax-watermark1-textbox.png]()
![Ajax-watermark2-textbox.png]()
If you do not want to do so much then just use the simple sample JavaScript code, which is described below. That JavaScript code provides you the same functionality that you have done before and can enjoy it with less work and quicker improved code.
Now for how to water mark a TextBox using JavaScript.
JavaScript Code
The given following scriptuses the "onblur" and "onfocus" events of the TextBox. The scripts have two checks; the first one check if the TextBox is empty and if the "blur" event is set then the water mark is done the same as you when assign the TextBox text manually using "document.getElementById(txtcontrol)" and changes the font color to "red", and the first check is that when the TextBox text matches the default text and the event type is focus then it clears the TextBox and sets the font color to black.
<script type = "text/javascript">
function SetWaterMark(txtcontrol, event) {
if (txtcontrol.value.length == 0 && event.type == "blur") {
var a = document.getElementById(txtcontrol);
txtcontrol.style.color = "red";
txtcontrol.value = a;
}
if (event.type == "focus") {
txtcontrol.style.color = "black";
txtcontrol.value = "";
}
}
</script>
Code for textboxes
Here I am calling the same script on the "onblur" and "onfocus" events and passing the reference of the TextBox and the event object.
<asp:TextBox ID="TextBox1" runat="server" CssClass="style4" Text = "First Name" ForeColor ="blue" onblur = "SetWaterMark(this, event);" onfocus = "SetWaterMark(this, event);"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="style3" Text = "Last Name" ForeColor = "blue" onblur = "SetWaterMark(this, event);" onfocus = "SetWaterMark(this, event);"></asp:TextBox>
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<script type = "text/javascript">
function SetWaterMark(txtcontrol, event) {
if (txtcontrol.value.length == 0 && event.type == "blur") {
var a = document.getElementById(txtcontrol);
txtcontrol.style.color = "red";
txtcontrol.value = a;
}
if (event.type == "focus") {
txtcontrol.style.color = "black";
txtcontrol.value = "";
}
}
</script>
<style type="text/css">
.style2
{
width: 56px;
height: 26px;
position: absolute;
left: 36px;
top: 127px;
}
.style3
{
width: 128px;
height: 22px;
position: absolute;
left: 11px;
top: 79px;
}
.style4
{
width: 128px;
height: 22px;
position: absolute;
left: 10px;
top: 46px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Water Mark Textboxes</h3>
<p> </p>
<p> </p></div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="style4" Text = "First Name" ForeColor ="blue" onblur = "SetWaterMark(this, event);"
onfocus = "SetWaterMark(this, event);"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="style3" Text = "Last Name" ForeColor = "blue" onblur = "SetWaterMark(this, event);"
onfocus = "SetWaterMark(this, event);"></asp:TextBox>
<asp:Button ID="Button1" runat="server" CssClass="style2" Text="Button" />
</form>
</body>
</html>
Output
![watermark-textbox1.png]()
![watermark-textbox2.png]()
![watermark-textbox3.png]()