Todays code snippet uses jQuery to attach
blur
and focus
listeners to an input
element, so default text is shown (like "enter your username") and that text is cleared when the user focuses into the field.
Getting ready
Setup an input element somewhere on the page:
<input id="myInputId" type="input"/>
And setup the following CSS class to handle the focusing styles:
.unfocused { color: #999; }
How to do it…
Here is the function:
function attach_focus_and_blur(elem, sText) { var elNode = $(elem); elNode.focus(function() { if (elNode.val().trim() == sText) { elNode.val(""); } elNode.removeClass(unfocused); }).blur(function() { if (! elNode.val().trim()) { elNode.val(sText); elNode.addClass(unfocused); } }); if (sText == elNode.val().trim()) { elNode.blur(); } else { elNode.focus(); } }
To use the function:
attach_focus_and_blur(myInputId,default text);
How it works…
Pass an element id or jQuery element as the first argument of theattach_focus_and_blur()
function and the default text as the second argument. The function will attach a focus
handler that clears existing text if it is equal to the default text and removes the unfocusedclass. It also attaches a
blur
handler that restores the default text if nothing was entered and the unfocusedclass. The last part of the function fires the appropriate event handler depending on the initial state of the input.