Default text with jQuery
Usability tip:
- At page load list default text, greyed out
- On input focus change colour to black and remove default text
- If box is empty when user leaves input, replace default text and grey out, otherwise leave what user has entered in black
label is a handy element to include also, I didn't realise this before but clicking a label gives focus to the input it's for. Earlier versions of Safari didn't do this, for some reason (IE 6 does?).
$(function() {
$('#searchterm').focus(function() {
if ($(this).val() == 'Enter keywords') {
$(this).val(''); this.style.color = '#000';
}
});
$('#searchterm').blur(function() {
if (this.value=='') {
this.value='Enter keywords';
this.style.color = '#999';
}
});
});
I'd probably oneline them.. but that's just me. Obviously the original input would have value="Search" and color:#999; to start with.
I suppose you could even disabled="disabled" the submit button if the default text is displayed.
