Home > Ajax, Asp.net, Javascript > Textbox Watermark using Ajaxtoolkit or By Javascript

Textbox Watermark using Ajaxtoolkit or By Javascript


Adding Watermark to textbox can be done in two ways:

1) Using Ajax Toolkit:

<asp:TextBox runat=”server” id=”txtname”/>

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
    TargetControlID="TextBox1"
    WatermarkText="Type First Name Here"
    WatermarkCssClass="watermarked" />

For more information on Ajax Toolkit please visit:
http://www.asp.net/ajax/

2) Using Javascript:

<asp:TextBox ID=”txtname” runat=”server” Text = “Please Enter your Name here”
 onblur = “TextboxWaterMark(this, event);”
 onfocus = “TextboxWaterMark(this, event);”>
 </asp:TextBox>

<script type = “text/javascript”>
 var Text = “Please Enter your text here”;//black

 function TextboxWaterMark(txtid, evnt)
 {
 if(txtid.value.length == 0 && evnt.type == “blur”)
 {
 txtid.style.color = “set the color you want”;//red
 txtid.value = Text;
 }
 if(txtid.value == Text && evnt.type == “focus”)
 {
 txtid.style.color = “set the color you want”;
 txtid.value=”";
 }
 }
 </script>

To use in code behind :

 txtname.Attributes.Add(”onblur”, “TextboxWaterMark(this, event);”);

 txtname.Attributes.Add(”onfocus”, “TextboxWaterMark(this, event);”);
  1. September 1, 2009 at 3:30 am

    hoo good

    PHP
    ASP
    AJAX
    JavaScript

  2. Tanuj Kumar
    January 4, 2012 at 11:17 am

    This is best one article so far I have read online. I would like to appreciate you for making it very simple and easy. I have found another nice post related to this post over the internet which also explained very well. For more details about that post check this url…..

    http://mindstick.com/Articles/263a6d0b-7988-4dc2-b041-4883356815e9/?Ajax%20Toolkit%20TextBoxWatermarkExtender%20Control%20in%20ASP.Net

    Thanks

  1. No trackbacks yet.

Leave a reply to Tanuj Kumar Cancel reply