Software Warlock

If you haven’t tried it already, Labelify is a great jQuery plugin that gives text fields default value labels so that you can either provide hints to your users, or to save space and not have separate labels for each field.

The plugin works by setting the contents of the text field to the title text and setting it to a special style whenever the field holds its default value. As soon as the field receives focus, the default value is removed and the user is free to type whatever they like.

One problem that must be overcome is that the script must remove these title values from the fields before the form gets submitted if the user doesn’t type something else in the fields. If it doesn’t the field submits bogus data, and may also cause the form to not pass validation. The script solves this problem by listening to the submit event on the form, and removing any remaining values that it had placed in the text fields when the page was loaded. The problem is, when a form is submitted via the submit(); method in Javascript, the event does not fire. This can be a big problem in ASP.NET because many of the controls auto-post back, which involves submitting the form via JavaScript.

To correct this problem, you can attach an event handler to a relevant event on the items in the page that could trigger a problematic post-back so that interacting with that item will explicitly trigger the submit event in jQuery. For example, the following code will respond to the click event on all ASP.NET link buttons:

// Hack to allow the ASP.NET link buttons to work with our labelify labels...
$("a[href^=javascript:__doPostBack]").click(function() {
  $(this).parents("form").triggerHandler("submit");
});

As second problem encountered in ASP.NET is that post-backs will cause the page to be re-rendered, sometimes with text pre-populated in the text fields from before the post-back was initiated. This text is considered the default value for these fields, which is a problem because labelify displays the title text whenever the text field’s value matches its default value.

To get around this, I created an updated version of labelify that will allow you to specify that you only want label text to be displayed if the value of the text field is empty, and have it ignore the default value for the field.

To use this updated version, the original Javascript to create the labelified fields would go from this:

$(document).ready(function(){
  $(":text").labelify();
});

to this:

$(document).ready(function(){
  $(":text").labelify({ replaceEmptyOnly: true });
});