enavu webdevmania tutsvalley psdestination
visit the enavu network
10 Comments Article Title Overlay

Advanced jQuery Placeholder Plugin (cross-browser support)

Plugin that enables you to use the Placeholder attribute inside your input fields.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Plugin that enables you to use the Placeholder attribute inside your input fields.

I was looking for a plugin that allows me to use the awesome Placeholder attribute inside my input fields so that on focus the value is replaced. I found a couple okay ones but none of them applied a placeholder class that can gray out my text so I decided to write one myself. I came up with this awesome little addition to your jQuery plugin arsenal.

Here is how to use it:

$("input:text").placeholder();

It is as easy as that. If you want your own custom class just do this:

$("input:text").placeholder({css_class: "anyclassyouwant"});

Just remember not to use the dot and just use the name of the class. By default it uses class placeholder so you can just add this to your CSS:

.placeholder {color:#888;  font-style:italic;}

How easy was that, now head on over and download this script:

Download Plugin (latest release)

The plugin is under the MIT license agreement. In short you are free to use it for whatever you like and redistribute as you see fit! However we do highly appreciate mentioning of our blog.

Related posts:

  1. Use HTML5 Placeholder Input Attribute Today using jQuery!
  2. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
  3. jPaginate – jQuery Pagination System Plugin
  4. Top 10 jQuery Snippets (including jquery 1.4)
  5. How To Create a jQuery Plugin

Did you absolutely LOVE this article... share it!

Comments

  • I downloaded this and noticed you didn’t put any author or copyright info in the plugin. You might want to add a comment or two and give yourself credit and let us developers know if we can use this code freely. Thanks!

    PS: Your “Submit Comment” buttons text is truncated in Firefox 3.5.10

  • Hey teebee i’m sorry for not including a license the plugin is so simple and clean i really didn’t think it needed one. But feel free to use it in ANY way you like with no accreditation required! If you want to you are always welcome to add a link to enavu.com! We are a growing community/company that actively tried to help web developers with all sorts of tools/plugins/frameworks/applications so anything you do to help us spread the word is welcome.

    Thanks!

  • Nice to see some different approaches to this, HTML5 Placeholders are awesome!

    I made a version that also supports input type=”password” (even for IE that doesn’t allow changing input type for showing a placeholder).

    http://github.com/danielstocks/jQuery-Placeholder

    Cheers

  • Pretty Cool Daniel! I didn’t see much use for a placeholder in password fields, but now i kind of do!

  • Hey Guys,

    For some reason this script crashes IE and firefox doesn’t like it. So I’ve modified the script a lil, here it is below:

    It also has a form submit handler to remove the placeholder value on submit.

    (function($) {
    $.fn.placeholder = function(options) {
    var defaults = {css_class: “placeholder”};
    var options = $.extend(defaults, options);
    this.each(function() {

    var phvalue = $(this).attr(“placeholder”);
    var currvalue = $(this).attr(“value”);
    if (currvalue == “”) {
    $(this).val(phvalue);
    $(this).addClass(options.css_class);
    }
    $(this).focusin(function(){
    var ph = $(this).attr(“placeholder”);
    if (ph == $(this).val()) {
    $(this).val(“”).removeClass(options.css_class);
    }
    });

    $(this).focusout(function(){
    var ph = $(this).attr(“placeholder”);
    if ($(this).val() == “”) {
    $(this).val(ph).addClass(options.css_class);
    }
    });

    });

    $(‘form’).submit(function(){
    $(‘input[type=text]‘, this).each(function(){
    if($(this).val()==$(this).attr(‘placeholder’)) $(this).val(”);
    });
    });

    return this;
    };
    })(jQuery);

  • ps..

    line 10 was the one causing the issue, changed it to this:
    $(this).val(phvalue);
    $(this).addClass(options.css_class);

  • Jason I was intrigued by your observation that the plugin does not work in IE and has Problems in FF… this script is being used by an commerce website with traffic averaging 10k people a day. I had to thoroughly test this before deploying. My whole company has tested it on a plethora of browsers. I even downloaded the release from the link above created a sample page and tested again with no problems what so ever. I don’t see how reversing the order of adding a class and changing a value could have fixed whatever issue you were having. But please post screenshots of the errors you are getting i’m highly interested to see them!

  • Oh and I like the on Submit idea, i’ll add that for sure.

  • Would be nice if you include a note to indicate that this plugin requires jQuery 1.4+ for .focusin and .focusout support … http://api.jquery.com/focusin/

    Daniel’s one worked a treat for me with jQuery 1.3.2 and looks more rock solid.
    http://github.com/danielstocks/jQuery-Placeholder

    Thank you for your contribution ;-)

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting