It’s often considered good usability to include default text in a form text input field, however if you don’t go the extra step to clear the form when the user clicks into the field to begin typing, you force them to first delete your default text before entering their own values.

One easy trick is to use JavaScript to clear the form text input field when the user clicks (or tabs) into it, and restore the default text if they have clicked (or tabbed) out of it without entering a value, that way they can come back to it when they’re ready and still benefit from the context the default text provides.

In the Real World…

Outside of Facebook’s FBML (for example, in a regular website or in an IFRAME application), we might stick something like this in the of our document:

// set the function to clear the field
function clickclear(thisfield, defaulttext) {
	if (thisfield.value == defaulttext) {
		thisfield.value = "";
	}
}

// set the function to restore the field
function clickrecall(thisfield, defaulttext) {
	if (thisfield.value == "") {
		thisfield.value = defaulttext;
	}
}

and then modify the form input fields to include an onfocus and onblur to trigger the events, like this:

(We use infocus instead of onclick to make sure the events are triggered whether the user clicks or tabs.)

On Facebook Using FBJS

Of course, since we’re using Facebook’s FBML, we have to use FBJS instead of “normal” JavaScript. Fortunately, in this case, it means we only have to tweak a little bit in that script to make it work in a Static FBML tab or an FBML application tab:

<!--
// set the function to clear the field
function clickclear(thisfield, defaulttext) {
	if (thisfield.getValue() == defaulttext) {
	  thisfield.setValue('');
	}
}

// set the function to restore the field
function clickrecall(thisfield, defaulttext) {
	if (thisfield.getValue() == "") {
	  thisfield.setValue(defaulttext);

	}
}
//-->

The modifications to the form fields are exactly the same:

As you can see, all we had to do here was change thisfield.value to thisfield.getValue and thisfield.setValue.

To get the same effect for a textarea box, added:

<!--
function clickcleartextarea(thisfield) {
  thisfield.setTextValue('');
}
//-->

and then for the HTML:

<textarea cols="50" rows="3" name="myfield">default text</textarea>

There are, of course, more elegant solutions that accomplish the same thing, where you’re not including the onfocus/onblur in the form field HTML itself, but I tend to prefer the slightly longer, less elegant way for this particular task on Facebook, since Facebook uses a lot of hidden form fields for friend selectors and other functions.

ssd-virtual-servers-banner-468x60

Advertisement

Themeforest
youtube-layout
Previous post

Embed a YouTube Playlist Using Static FBML

fbjs-thumbnail-slideshow
Next post

FBJS Image Carousel for FBML Apps & Fan Page Tabs

snipe

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • Lee

    Thank you very much exactly what I was looking for 🙂

    Is there any way of getting the text area to work in the same way as the textbox?

    If you click out of the text are the default text disappears.

    Thanks and regards

    Lee

  • Hi Lee – you should be able to create a clickrecalltextarea function to handle that, similar to how the clickcleartextarea() function works.

  • Hi, thanks for the post. I want to ask you is there any way to make the text box on fbml page as it is on the ‘Wall’?

  • Nadav

    hi rehan,

    try this

  • Edson Alain

    Eres el mejor De verdad aprendere de ti para luego poder ayudar tambien pero en español GRACIAS COMPRADRE

  • Imhotep20

    Doesn’t work here…. 🙁

    • It does work – I’ve used it for a while on some big projects. Maybe check your code and try again? (Also, Facebook shit the bed pretty hard yesterday, so there’s a chance some stuff isn’t back up to their normal level of dysfunction yet.)

      • Mohamed

        luuuuv ur website soo much that i put it on my chrome bookmark bar. just tried to make a similar code for the text area and it doesnt work too. i noticed that textarea doesnt have a value attribute could that be the reason? anyway heres my code

        function clickrecallta(thisfield, defaulttext) {
        if (thisfield.getValue() == “”) {
        thisfield.setValue(defaulttext);

        }
        }

        and on the textarea tag added
        onblur=”clickrecallta(this,’default text’)”

      • Imhotep20

        The strange thing is: If I test this code for itself in an (apart from that) empty static fbml-tab, it works. If I want to integrate it in a bigger Page, it doesn’t work, and I have no clue why….

  • Brilliant! You just saved my bacon with this tip.

    Keep doing what you are doing!

  • Jer

    This is very cool. Thanks for the information.

    Have you happened to try using this in a form that you want to have some required fields? Once I make a field auto clear it takes the value and can submit my form bypassing the alert that should popup.

  • Oprea Andrei

    Thank You! Very usefull.