Friday, January 9th, 2009

defaultValueActsAsHint

Category: Examples, Prototype

<>p>Thomas Fuchs has created defaultValueActsAsHint, an implementation of the Input Prompt pattern:

An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.

Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.

javascript
< view plain text >
  1. $('element_id').defaultValueActsAsHint();

This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.

Check out the test sample that lives in his prototype_helpers library that also includes deferUntil.

Related Content:

11 Comments »

Comments feed TrackBack URI

jQuery users should check out ToggleVal. It’s currently at version 2.0.2, and has lots more options than just clearing/populating the inputs, such as conditional classes for styling, and clearing unchanged values on submit.

Comment by akuzemchak — January 9, 2009

If you’re interested in a slightly more robust solution that doesn’t require you to manually call defaultValueActsAsHint() on each element you’d like to “hint”, you should check out my Ghostie project on Github (http://github.com/atnan/ghostie/tree/master), which allows you to add a CSS class of “ghostie” to any text/password field and it will automatically pull the value specified in the “title” attribute in as the default text. It also ensures that the default value is cleared if the form is submitted, and also adds a class of “ghostied” when the default value is populated so that you can style the default state easily.

Comment by atnan — January 9, 2009

In Jquery:

(function($){
$.fn.defaultValueActsAsHint = function(){
$(this).focus(function(){
if(this._default != this.value) return;
this.value = "";
}).removeClass('hint').blur(function(){
if(this.value != '') return;
this.value = this._default;
}).addClass('hint').get(0)._default = this.val();
};
})(jQuery);

Comment by twoism — January 9, 2009

For MooTools: http://www.clientcide.com/wiki/cnet-libraries/09-forms/05-overtext

Comment by anewton — January 9, 2009

An issue with using the value attribute is that it can be overwirtten when a user hits the back button after submitting the form, leaving your hint text as the value just submitted.

I’ve published a jQuery implementation on GitHub that gets around this issue and the accessibility issue of not providing a label – by default, it grabs the value from the label and moves the label off-screen. You can override this behaviour if you want to use the value attribute, though.

http://github.com/alexrabarts/jquery-clearinginput

Comment by alexrabarts — January 9, 2009

I loved this implementation, but I agree further work would be nice to clear the values on form submission and supporting also select fields. Nice work,though.

Comment by icoloma — January 10, 2009

It’s a flawed implementation, if you are halfway through a form and refresh the page then _default is set to the halfway value. Definately a bad bit of code! Kinda OK for freckle as the form is so small, but I’d reccomend against it.

Comment by oopstudios — January 11, 2009

Am I missing something, or is this virtually the same thing as this plugin – written 2 years ago:

http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

and:

http://www.alistapart.com/articles/makingcompactformsmoreaccessible

There’s another version that was written about 6-9 months ago too – but I can’t remember the link.

Have I missed the point – hasn’t this pattern been implemented time and time again?

Comment by remy — January 12, 2009

Here’s an improved jQuery plugin that doesn’t use the value attribute because @oopstudio and @anewton’s concerns above. This version won’t change the value after a refresh since it uses a title attribute instead.

http://gist.github.com/46340

Comment by manalang — January 13, 2009

We’ve been doing this in schmedley on a bunch of our schmidgets and we’re using MooTools. After reading this article I was inspired to make a similar contribution – so, I made some quick edits to the code we’ve created and have posted an article with a MooTools class for this functionality on my site – http://dustincaruso.com/2009/01/defaultvalueactsashint/

Comment by dustincaruso — January 14, 2009

It’s currently at version 2.0.2, and has lots more options than just clearing/populating the inputs, such as conditional classes for styling, and clearing unchanged values on submit.

Comment by 6265565 — June 2, 2009

Leave a comment

You must be logged in to post a comment.