So I just finished writing my first jQuery plugin! The idea behind it is simple – provide a dead simple way to apply a default value to any text-based form field.
In it’s current state, my plugin accomplishes the following:
- Provides a simple way to apply a default value to any text-based form field.
- Only shows default value for EMPTY form fields.
- Default value returns to an empty form field when it’s lost focus.
- Upon submitting the form, fields which still contain the default value are set to empty
Example Usage:
$(”#myfield”).DefaultValue(”My Default Value..”);
I’m sure there are other plugins that satisfy these requirements and I’m not claiming that this is the best in the world, but it satisfies all my requirements and gave me the opportunity to develop my first jQuery Plugin!
I may enhance the plugin soon to incorporate styling to form fields.
doesnt seem to work for password fields. its masking the default values
Well – it will apply a default value to a password field, but password fields are inherently “masked”, and for good reason. I wouldn’t want someone seeing my password on-screen, even if it were a default value.
I’ve updated the demo to show how this plugin works with password fields. Let me know if this helps!
Seems that if you use the script on a class of items (i.e. you get an array back), something goes wrong.
I changed
el.val(def).focus(function() {
to el.val(def);
el.focus(function() {
and it worked again. Still suboptimal, because it then will blank all controls, even if you only selected one, but in my case that’s not too horrible.
Thanks for the bug report Jan! I’ll take a look and have a fix as soon as I can.
Thanks again
How different is this from $(”#fieldname”).attr(”defaultValue”) ?
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?
[...] that way, but the search began for a better (read: functional) solution. Enter Jason Palmer and his jQuery Form Field Default Value plugin. Not to steal any of Jason’s thunder, but the plugin is elegant and doesn’t [...]
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”).
I’ve updated the code to have gray default coloring return (initiate it with a gray css):
—
//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’});
}
});
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’});
}
});
Jason,
Great plugin, It’s a nice little utility that just saved me some time under a tight deadline. Thanks for sharing.
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!
OMG! Thx Dude, just what i needed
Jason, Great plugin man! Really helps for sites that use a lot of inputs and need default text in them. Little bug in firefox though. If you go to a page, on first load it works, but if you simply refresh it not longer works (just a firefox thing).
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!