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:
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;
}
}
[/javascript]
and then modify the form input fields to include an onfocus and onblur to trigger the events, like this:
[html][/html](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:
[javascript][/javascript]
The modifications to the form fields are exactly the same:
[html][/html]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:
[javascript][/javascript]
and then for the HTML:
[html][/html]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.
