===========================
(function($) {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,”");
}
$.fn.DefaultValue = function(klass,text) {
return this.each(function() {
//Make sure we’re dealing with text-based form fields
if (this.type != ‘text’ && this.type != ‘password’ && this.type != ‘textarea’) {
return;
}

//Store field reference
var fld_current = this;
var fldVal = this.value.toLowerCase().trim();
var textVal = text.toLowerCase().trim();

//Set value initially if none are specified
if (fldVal == textVal || fldVal == ”) {
$(this).addClass(klass);
this.value = text;
}

//Remove values on focus
$(this).focus(function() {
var fldVal = this.value.toLowerCase().trim();
if (fldVal == textVal || fldVal == ”) {
this.value = ”;
$(this).removeClass(klass);
}
});

//Place values back on blur
$(this).blur(function() {
var fldVal = this.value.toLowerCase().trim();
if (fldVal == textVal || fldVal == ”) {
$(this).addClass(klass);
this.value = text;
}
});

//Capture parent form submission
//Remove field values that are still default
$(this).parents(“form”).each(function() {
//Bind parent form submit
$(this).submit(function() {
if (fld_current.value.toLowerCase().trim() == textVal) {
fld_current.value = ”;
}
});
});
});
};
})(jQuery);
===========================

I’ll be tuned… Thanks again!

It’s great to hear that you’re using it for your site. BTW, the cherokee project looks very promising!

As you can see, several developers have created updates to the plugin over the past few months. In the next few weeks, I’ll be updating the plugin with some of these features/fixes.

Check back soon!

This is the modified version. I have added a new parameter (class) to change the class of the input element.

jQuery.fn.DefaultValue = function(klass, text){
return this.each(function(){
//Make sure we’re dealing with text-based form fields
if (this.type != ‘text’ && this.type != ‘password’ && this.type != ‘textarea’)
return;

//Store field reference
var fld_current = this;

//Set value initially if none are specified
if($(this).val() == ”) {
$(this).val(text);
} else {
//Other value exists – ignore
return;
}

//Remove values on focus
$(this).focus(function() {
if($(this).val() == text || $(this).val() == ”) {
$(this).removeClass(klass);
$(this).val(”);
}
});

//Place values back on blur
$(this).blur(function() {
if($(this).val() == text || $(this).val() == ”) {
$(this).addClass(klass);
$(this).val(text);
}
});

//Capture parent form submission
//Remove field values that are still default
$(this).parents(“form”).each(function() {
//Bind parent form submit
$(this).submit(function() {
if($(fld_current).val() == text) {
$(fld_current).val(”);
}
});
});
});
};

Fixing it is easy, on this line:

//Set value initially if none are specified
if(this.value==”) {

Just add:

//Set value initially if none are specified
if(this.value==” || this.value == text) {

Boom fixed and works great in all browsers!

Two little nitpicks,
1. It fails if you’re using it with jQuery’s noconflict mode. That’s easily fixed by changing all instances of ‘$(‘ to ‘jQuery(‘.

2. There’s an edge case where someone will put a value in a field, refresh the page (their inputted value is retained), and then the focus and blur actions are not applied. You can fix this by removing the ‘return’ statement on line 15. I dont’ think it’s needed for anything else, unless you explicitly didn’t want to add the focus and blur handlers for some reason.

Anyways, thanks again!

//Set value initially if none are specified
if(this.value==text || this.value==”) {
this.value=text;
$(this).css({‘color’ : ‘gray’});
}

//Remove values on focus
$(this).focus(function() {
if(this.value==text || this.value==”){
this.value=”;
$(this).css({‘color’ : ‘black’});
}
});

//Place values back on blur
$(this).blur(function() {
if(this.value==text || this.value==”){
this.value=text;
$(this).css({‘color’ : ‘gray’});
}
});