jQuery Plugin – Form Field Default Value 14

Posted by Jason on August 24, 2008

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:

  1. Provides a simple way to apply a default value to any text-based form field.
  2. Only shows default value for EMPTY form fields.
  3. Default value returns to an empty form field when it’s lost focus.
  4. Upon submitting the form, fields which still contain the default value are set to empty

Example Usage:

$(”#myfield”).DefaultValue(”My Default Value..”);

View Demo

Download

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.

Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

  1. ct Fri, 05 Sep 2008 12:10:32 PDT

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

  2. Jason Fri, 05 Sep 2008 12:22:29 PDT

    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.

  3. Jason Fri, 05 Sep 2008 12:27:45 PDT

    I’ve updated the demo to show how this plugin works with password fields. Let me know if this helps!

  4. Jan Wed, 10 Sep 2008 08:43:05 PDT

    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.

  5. Jason Wed, 10 Sep 2008 08:51:32 PDT

    Thanks for the bug report Jan! I’ll take a look and have a fix as soon as I can.

    Thanks again

  6. Brinley Ang Sun, 02 Nov 2008 20:40:34 PST

    How different is this from $(”#fieldname”).attr(”defaultValue”) ?

  7. Jake Rutter Fri, 28 Nov 2008 06:04:46 PST

    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?

  8. [...] 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 [...]

  9. Lukas Fri, 19 Dec 2008 13:25:09 PST

    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”).

  10. Brett Fri, 16 Jan 2009 15:52:43 PST

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

  11. Brett Fri, 16 Jan 2009 15:56:14 PST

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

  12. Robby Wed, 11 Mar 2009 12:29:45 PDT

    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!

  13. William Sat, 02 May 2009 06:23:48 PDT

    OMG! Thx Dude, just what i needed :-)

  14. Clark Thu, 28 May 2009 15:32:04 PDT

    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!

Comments


Clicky Web Analytics