In this article I will explain how water mark textbox using JavaScript and also with Ajax. Firstly I explain how water mark textbox using Ajax. To do that thing you can follow the following steps.
Step 1
Download Ajax control tool kit from link.
Step 2
Right click on standard tool box->Add tab, give the name of tab
Step 3
Right click on newly created tab->choose items->Click on browse button and browse AjaxControlToolLit.dll. After it click on OK button.
Step 4
At the Solution explorer, add reference->browse "AjaxControlToolLit.dll", After it click on OK button.
Step 5
Drag the "ToolKitScriptManager" on the top of your aspx page from newly created tab controls.
Step 6
After it, Drag the "TextBoxWatermarkExtender".
Step 7
Set the TextBoxWatermarkExtender properties TargetControlID=" " WatermarkText=" ", "TargetControlID" accepts 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" %>
<%@ 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
If you do not want to do lot of efforts Just use the a simple JavaScript
code, which is describes below and that JavaScript code provides you same
functionality which you have done before and enjoy with less and fast improve
given below code.
Now, I go with how water mark textbox using JavaScript.
JavaScript Code
The given below script be called on "onblur" and "onfocus" events of the textbox. The scripts have two checks; first one check is that when textbox is empty and event type is "blur" event is set the water mark same as you assign the textbox text manually with the help of document.getElementById(txtcontrol); and changes the font color as "red", and the first one check is that when textbox text matches default text and the event type is focus it clears the textbox and set the font color as black.
Output
If you do not want to do lot of efforts Just use the a simple JavaScript
code, which is describes below and that JavaScript code provides you same
functionality which you have done before and enjoy with less and fast improve
given below code.Now, I go with how water mark textbox using JavaScript.
JavaScript Code
The given below script be called on "onblur" and "onfocus" events of the textbox. The scripts have two checks; first one check is that when textbox is empty and event type is "blur" event is set the water mark same as you assign the textbox text manually with the help of document.getElementById(txtcontrol); and changes the font color as "red", and the first one check is that when textbox text matches default text and the event type is focus it clears the textbox and set the font color as 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 "onblur" and "onfocus" event and passing the reference of the textbox and the event object.
Here I am calling the same script on "onblur" and "onfocus" event 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" %>
<%@ 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
No comments:
Post a Comment