Skip to content

TextboxTitle – a jQuery plugin

February 13, 2012

Earlier this week I found myself needing to create a simple but effective User Interface tweak on a client’s website – I needed to include a label for a text field within the field itself.  I find the need for this type of UI enhancement a lot on mobile websites, where real estate is so limited, but I have found it to be just as useful for desktop-browser websites, so I decided to implement it as a jQuery plugin, and it worked well enough that I thought I share it here.

First, to give a clearer picture of what I’m talking about, imagine a simple mobile website with the following simple form:

This form is in need of some UI elements to explain what each of the two text fields is for, but with such limited space on a mobile form, it’s often not practical to add label elements either above or to the side of our textboxes.  So, the obvious solution is to put the labels in the textboxes themselves, like this:

This is a pretty simple function, but let’s take a look at the required functionality.

  1. It needs to be simple to apply to any text field.
  2. The “title” text should be visually different (in my case I made the text a lighter shade of grey).
  3. The “title” text needs to disappear whenever the form element is given focus, and any text typed into the field by the user should be the normal visual style.
  4. When focus is lost, the element should maintain any user-entered text, or, if the element is empty, the “title” text should reappear.
  5. If the “title” text is still in the field when the form is submitted, the form should treat it as an empty field.

My solution is the jQuery plugin you can find here.  To use it, first add the .js file to your HTML page, along with the usual jQuery script include:

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script&gt;

<script type=”text/javascript” src=”../resources/script/jquery.textboxTitle.js”></script>

Next, on your form fields, add the following class:

<input type=”text” class=”inputTextboxTitle” />

In ASP.net, it would look like this:

<asp:TextBox runat=”server” ID=”txtLastName” Width=”150px” CssClass=”inputTextboxTitle />

Last, add the text you want to appear within the textbox using the “title” name / value pair:

<input type=”text” title=”First Name” />

In ASP.net, the ToolTip attribute relates to “title” when the input field is rendered as HTML:

<asp:TextBox runat=”server” ID=”txtLastName” Width=”150px” CssClass=”inputTextboxTitle” ToolTip=”Last Name” />

And that’s it.  The class name is only used to make it easier for jQuery to find the form fields – all necessary CSS for the functionality is created dynamically by the plugin.  If you start typing in one of the fields, your text will appear normal (not the lighter shade of grey), and when the form is submitted, the plugin will remove the “title” text first, so the fields are truly empty when your server-side code tries to handle the submission.

I hope someone out there can find this useful.  I don’t usually blog this specifically about my code, but building this as a plugin was fun and I thought it might be of use to the community.  If you do find this useful, or have any questions about it, please let me know.

Advertisements
One Comment leave one →
  1. February 17, 2012 4:10 pm

    FYI – I’ve just expanded this plugin to include support for password fields.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: