I’m doing a project at work that is unfortunately targeted mostly to IE8 browsers, so using HTML5 functionality for it is “iffy” at best.

However, there is one screen where I really wanted to mimic the HTML5 placeholder behavior (which is demonstrated in the iframe below, since stupid WordPress won’t let me write the tag in the HTML editor with the “placeholder” attribute…grrr!)

So anyway, to mimic this behavior, I needed to remove the default placeholder text when anyone clicked into the textbox.  I also wanted to have my placeholder text grayed out, but then make it darker when the user starts typing.  I also have the added joy of writing this all in ASP.NET, which requires a little extra work around.  To the code!

Step one is to add the textbox to the page with default text already entered.  I also have a CSS class that makes the text light gray.

<asp:TextBox ID="tbExample" runat="server" Text="Placeholder Text Goes Here" CssClass="lite-gray"></asp:TextBox>

Next, since it’s .NET, I had to add the ‘onclick’ and ‘onblur’ events in the codebehind.  I just stuck them in the Page_Load event.

protected void Page_Load(object sender, EventArgs e)
{
     if (!Page.IsPostBack)
     {
          tbExample.Attributes.Add("onclick", "mimicPlaceholder()");
          tbExample.Attributes.Add("onblur", "mimicPlaceholder()");
     }
}

So now it’s just left to write the JavaScript.

function mimicPlaceholder()
{
     var myTextBox = document.getElementById('<%= tbExample.ClientID %>');

     if (myTextBox.value == "Placeholder Text Goes Here")
     {
          myTextBox.value = "";
          setToBlack(myTextBox);
     }
     else if (myTextBox.value == "")
     {
          myTextBox.value = "Placeholder Text Goes Here";
          setToGray(myTextBox);
     }
}

And in my jQuery scripts file, I add these two functions

function setToBlack(field) {
     $(field).removeClass("lite-gray");
}

function setToGray(field) {
     $(field).addClass("lite-gray");
}

So, to explain the code…the tbExample.Attributes.Add portion adds the onclick and onblur events to the text box. That will make sure that the javascript function mimicPlaceholder() will get called whenever anyone clicks into the tbExample text box or clicks out of the tbExample text box.

The mimicPlaceholder javascript function assigns the textbox itself to a variable “myTextBox”. Then, it checks to see if the default value (“Placeholder Text Goes Here”, in this case) is present in that text box. If so, it removes the default text and calls the setToBlack function to remove the “lite-gray” class from the textbox. If the field is empty, however, it will add that value back INTO the textbox and ADD the “lite-gray” class to the textbox.

In theory, it’s entirely possible for the field to somehow get things messed up and click into an empty textbox which would then populate it with the default text, making the user have to clear it out manually. However, (again, in theory) a user will always be clicking into the field for the first time with the default text there, and it should be impossible for them to leave the field empty without the javascript filling it back in with the default text. (And if they leave the field with another value in place, I’d prefer it remained there instead of the default text, which is why I only fill it back in if the field is blank.)

It’s rather crude, but it’s working like a charm so far.