Clear Default Form Input Value on Click Using FBJS
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 <head> of our document:
<script type="text/javascript">
// 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;
}
}
</script>
and then modify the form input fields to include an onfocus and onblur to trigger the events, like this:
<input type="text" name="myfield" value="default text" onfocus="clickclear(this, 'default text')" onblur="clickrecall(this,'default text')" />
(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:
<script>
<!--
// 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);
}
}
//-->
</script>
The modifications to the form fields are exactly the same:
<input type="text" name="myfield" value="default text" onfocus="clickclear(this, 'default text')" onblur="clickrecall(this,'default text')" />
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:
<script>
<!--
function clickcleartextarea(thisfield) {
thisfield.setTextValue('');
}
//-->
</script>
and then for the HTML:
<textarea cols="50" rows="3" name="myfield" onfocus="clickcleartextarea(this)">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.
