A Programmer’s Perspective

doesnt seem to work for password fields. its masking the default values

by ct on September 5, 2008 at 12:10 pm. #

Jason,

Great work! I know you mentioned that this wont work with password fields because of their masked nature. But if you look at facebook, somehow they figured it out on their login page. It shows “Password” for the password field until you click on it? Maybe they are rewriting the field once you click on it to change states?

what do you think?

by Jake Rutter on November 28, 2008 at 6:04 am. #

Hi Jason,
thanks for good plugin, but I have one problem. After first load is all OK, but after press F5 key, there remains default text in plugin but after click in input, text doesn’t disappear (in all browsers).

And one notice.. I would appreciate if there was option to have password in input (default value) masked or not (for example: write in word “password”).

by Lukas on December 19, 2008 at 1:25 pm. #

Actually… I just realized that it’s best to initiate the gray from within the script too:

//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’});
}
});

by Brett on January 16, 2009 at 3:56 pm. #

OMG! Thx Dude, just what i needed

by William on May 2, 2009 at 6:23 am. #

Tx jason. Nice n nifty. Well, i read d comments n realized reg the problem wid password field. Lucky me, im not using it in a login form . Anyways, lemme know once if the password-problem is fixed. I have a bunch of developers im guiding, i would love to pass this onto them.

by satya on July 19, 2009 at 4:48 am. #

Jason, thanks for sharing this code… We just start using a modified version of your plugin in Cherokee-Admin (http://www.cherokee-project.com)

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(”);
}
});
});
});
};

by SKaRCHa on August 30, 2009 at 11:37 am. #

We are not using in the website, but in web application (Cherokee-Admin) to configure Cherokee web server.

I’ll be tuned… Thanks again!

by SKaRCHa on September 1, 2009 at 5:30 am. #

This doesn’t seem to work with jquery 1.4.2 any ideas as to why???

by Emmanuel on March 26, 2010 at 8:41 am. #

Here is the code:

jQuery.fn.DefaultValue = function(text,hidden_password_field){
return this.each(function(){
var mInputName = this.id;
//Store field reference
var fld_current=this;
//Make sure we’re dealing with text-based form fields
if(fld_current.type != ‘text’ && fld_current.type != ‘password’ && fld_current.type != ‘textarea’)
return;

//Set value initially if none are specified
if(fld_current.value==”) {
fld_current.value=text;
if(fld_current.type==’password’ && hidden_password_field!=”){
$(“#”+hidden_password_field).val(text);
$(“#”+mInputName).val(“”);
$(“#”+mInputName).hide();
}
} else {
//Other value exists – ignore
return;
}

//Remove values on focus
$(fld_current).focus(function() {
if(fld_current.value==text || fld_current.value==”){
fld_current.value=”;
}
});

if(fld_current.type==’password’ && hidden_password_field!=”){
$(“#”+hidden_password_field).focus(function() {
$(“#”+hidden_password_field).hide();
$(“#”+mInputName).show();
$(“#”+mInputName).focus();
});
}

//Place values back on blur
$(fld_current).blur(function() {
if(fld_current.value==text || fld_current.value==”)
fld_current.value=text;
if(fld_current.type==’password’ && hidden_password_field!=”){
$(“#”+hidden_password_field).show();
$(“#”+mInputName).hide();
$(“#”+mInputName).val(“”);
}
});

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

In HTML use like thius:
Javascript:
$(document).ready(function() {
$(“#passwordFld”).DefaultValue(“Type your Password”,”passwordMask”);
});

Body:

by Emmanuel on March 26, 2010 at 8:51 am. #

Hey, Jason! It’s quite unconvinient to do so in javascript, ’cause it’s more convinient to set default field value in the html code itself:

Everything you need to do with it – add some handlers, that will use safe ALT attribute to store default value and add some code to onload event:

jQuery(document).ready(function(){

$(“input”).each(function() {
$(this).attr(“alt”, $(this).attr(“value”));
});

$(“input”).focus(function(){
if ($(this).attr(“type”) == “text” && $(this).attr(“value”) == $(this).attr(“alt”))
$(this).attr(“value”, “”)
});

$(“input”).blur(function(){
if ($(this).attr(“type”) == “text” && $(this).attr(“value”) == “”)
$(this).attr(“value”, $(this).attr(“alt”))
});

});

That’s all! Graceful degradation is preserved! Good luck!

by Alexander Shlygin on April 16, 2010 at 6:54 am. #

i want to make function in which argument will be pass jQuery object which is id of form.and return value of function should be map of name-value pair of each elaement in form.how can i do that?>

by tina on May 10, 2010 at 10:23 am. #

Hi Jason,

ive been searching for something like this, and as such wanted to ask permission to use this as a base for our contact forms we develop for our templates and sell on themeforest, woudl greatly appreaciate a response.

Thanks

Christian

by christian on June 21, 2010 at 3:59 am. #

Thanks Jason, appreciate it!

by christian on June 24, 2010 at 8:52 am. #