Create Textbox Watermark Using CSS and JavaScript

Lately I've been on this kick where I try to use basic CSS and JavaScript to mimic functionality available in the ASP.NET AJAX Library.  It's not that I am trying to recreate the wheel, just that when I am able to, I get a kick out of recreating functionality that I (or my reader's) might find themselves using in the future.  I also think it's funny that some of the controls (watermarked textbox for example) are considered Ajax.  It's actually called JAC (JavaScript & CSS).

Another reason I created this functionality is because I have this ongoing project (ControlLibrary.csproj) that I am plugging these into.   When I am done I will release in some form or another whether it be a .DLL or the actual source ($1 Million USD ;-) ).  This way you don't have to download and install the ASP.NET AJAX Control Library to access functionality that really isn't even Ajax (in some cases like, not even close).

The watermarked textbox is a perfect example of something that is easy to recreate with elementary JavaScript and CSS. First the CSS we will use.

<style type="text/css">

.watermark
{
background-image: url('images/overlay.gif');
background-repeat: no-repeat;
padding-left: 20px;
vertical-align: middle;
color: DarkGray;
}

.normal
{
}

</style> 

Even with the ASP.NET AJAX Library you need to specify the CSS classes to use.  Here I have the "watermarked" and "unwatermarked" CSS class (normal).  Watermark gives our textbox a little overlay image and changes the font-color to a darker shade of gray similar to the ASP.NET AJAX version. For the overlay.gif I just resized an icon with Paint.NET. FYI, a default ASP.NET TextBox control is roughly 21px high.  In this case, I resized to 19px high and set the vertical-align to middle.  Normal has no style and gives us a normal-looking textbox. Easy.

Next we need to add some client-side functionality to our textboxes.  I simply put this in the Page_Load Event and when I create an actual control for this in the future this will be done behind the scenes based on properties that are set by the end-user.  But, for proof-of-concept here's what I did:

string defaultValue = "Enter Value";

textFirstName.Attributes.Add("class", IsPostBack ? "normal" : "watermark");
textLastName.Attributes.Add("class", IsPostBack ? "normal" : "watermark");

if (!IsPostBack)
   foreach (Control control in Page.Form.Controls)
      if (control is TextBox)
{
TextBox textbox = (TextBox) control;
textbox.Attributes.Add("onfocus", string.Format("OnFocus('{0}', '{1}')", textbox.ClientID, defaultValue));
textbox.Attributes.Add("onblur", string.Format("OnBlur('{0}', '{1}')", textbox.ClientID, defaultValue));

         textbox.Text = defaultValue;
} 

Simple and painless.  Setting attributes for TextBox to call our client-side functions.  Again, this will be done behind-the-scenes from the control I am creating.  The JavaScript is pretty basic also.

<script type="text/javascript" language="javascript">

function OnFocus(elementId, defaultText)
{
if (document.getElementById(elementId).value == defaultText)
{
document.getElementById(elementId).className = "normal";
document.getElementById(elementId).value = "";
}
}

function OnBlur(elementId, defaultText)
{
var textValue = document.getElementById(elementId).value;

if (textValue == defaultText || textValue.length == 0)
{
document.getElementById(elementId).className = "watermark";
document.getElementById(elementId).value = defaultText;
}
else
document.getElementById(elementId).className = "normal";
}

</script> 

All we have to worry about are 2 relatively simple methods to handle the onfocus (or could've been onclick) and onblur event (or could've been ontextchanged).  Since we are passing in the default value and the textbox's id we can compare the values and set the CSS class appropriately.

Here's what the finished product looks like.



You can see how this would be very easy to encapsulate into a control.  When I am done you will be able to add to your form like this:

<wa:WatermarkTextBox WatermarkCss="a" NormalCss="b" Text="asdf" /> 

Easy.