//Set default values
$('#name').val('First Last');
$('#email').val('[email protected]');
$('#subject').val('Subject');
$('#message').val('Message');
//Change style when user types
$('#name,#email,#subject,#message').keypress(function() {
$(this).css({
'color':'black',
'font-style':'normal'
});
});
//Check each input for change
$('#name').focusin(function(){
if($(this).val() == 'First Last') {
$(this).val('');
}
});
$('#name').focusout(function() {
if($(this).val() == '') {
$(this).val('First Last');
$(this).css({
'color':'grey',
'font-style':'italic'
});
}
});
$('#email').focusin(function(){
if($(this).val() == '[email protected]') {
$(this).val('');
}
});
$('#email').focusout(function() {
if($(this).val() == '') {
$(this).val('[email protected]');
$(this).css({
'color':'grey',
'font-style':'italic'
});
}
});
$('#subject').focusin(function(){
if($(this).val() == 'Subject') {
$(this).val('');
}
});
$('#subject').focusout(function() {
if($(this).val() == '') {
$(this).val('Subject');
$(this).css({
'color':'grey',
'font-style':'italic'
});
}
});
$('#message').focusin(function(){
if($(this).val() == 'Message') {
$(this).val('');
}
});
$('#message').focusout(function() {
if($(this).val() == '') {
$(this).val('Message');
$(this).css({
'color':'grey',
'font-style':'italic'
});
}
});
views:
45answers:
2
+2
A:
There are a number of plugins out there that handle this style of In-Field Labels.
- In Field Labels -- I wrote this one, and it uses positioning to move the label over (or under via z-index) the input area. It has the added benefit of not disappearing completely even after the field has focus. It only hides fully when the user starts to type.
- Labelify -- Never used it, but it follows your approach of swapping out actual text values.
Doug Neiner
2010-01-29 15:39:28
In Field Labels looks like the perfect answer thanks.
Charlie Grado
2010-01-29 16:37:03
A:
I recommend the "Jquery Form Plugin" available here: http://jquery.malsup.com/form/#ajaxSubmit
Good luck!
Wes Floyd
2010-01-29 15:41:30