Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

placeholder


Placeholder Support Detection

Submitted by emmerich on October 7, 2010 - 10:28am

Extends jQuery.support to add a placeholder field, which is set to true or false depending on whether the browser supports the placeholder attribute on input tags.

Credit goes to Mark Pilgrim at Dive Into HTML5

jQuery.placeholder

Submitted by tracker1 on October 5, 2010 - 7:00pm

jQuery Placeholder

While the site is under construction, you can grab the latest version here.

This creates an HTML5-style input placeholder/watermark/hint for browsers without support for a native placeholder attribute on input tags, this plugin will create an overlay/watermark using a LABEL tag, with a placeholder class applied to it. This tag will then be absolutely positioned over the text input, so that it displays over the top when the input has no value, and is not focused.

jQuery HTML5 Form Plugin

Submitted by matmancini on September 22, 2010 - 3:39pm

HTML5 validates forms without additional JavaScript.
Currently only Safari & Google Chrome supports this functionality.
This plugin gets the same result in Firefox, Opera & Internet Explorer.
With a single line of code...

jQuery-Placeholder Plugin

Submitted by roflwtfbbq on September 16, 2010 - 8:35am

A jQuery plugin that enables HTML5 placeholder support for legacy browsers

Text Placeholder

Submitted by NV on July 6, 2010 - 11:58am

The placeholder attribute is the part of HTML5 specification. Currently, it works only in WebKit-based browsers, like Google Chrome and Safari. Placeholder.js fixes it!

Tested on IE 6—8, Firefox 3.5, Safari 4—5, Google Chrome 3—6, Opera 9.5—10.5.

Example

HTML

<input placeholder="inbox@disney.com">

JS

$("[placeholder]").textPlaceholder()

CSS

.text-placeholder {color: #AAA !important}

HTML5 Placeholder support Cross-Browser (replace input field value)

Submitted by agrublev on July 2, 2010 - 11:23am

This plugin is the most advanced of it's kind as it not only has full support for the placeholder value but it also allows you to set a custom style when the text inside the text field is the placeholder so it can truly look and act like the placeholder in HTML5.

HTML5 placeholder shim

Submitted by mathiasbynens on July 2, 2010 - 10:05am

The plugin automatically checks if the browser supports the HTML5 placeholder attribute (to be used with input and textarea elements) natively. If this is the case, the plugin won’t do anything. In browser that don’t support placeholder yet, this plugin allows you to easily emulate the expected behavior.

Example usage:

$('input, textarea').placeholder();

jQuery-placeholder

Submitted by cpharmston on June 13, 2010 - 12:25am

A JavaScript shim to emulate the behavior of the HTML5 placeholder attribute where it isn't supported

PlaceHeld

Submitted by makenosound on April 21, 2010 - 8:56am

Provides fallback support for HTML5 placeholder attributes in browsers that don't yet support it.

Just call the placeHeld() function on any elements you want to use placeholder text for. This will probably look something like:

$("input[placeholder]").placeHeld();

In browsers that support placeholder attributes (Safari, Chrome), nothing will happen. Other browsers will show the contents of the placeholder attribute (by populating the value attribute) and a "placeheld" class will toggle on/off. You can customise the class by passing in a default value in the initialisation:

$("input[placeholder]").placeHeld({
  className: "i-dislike-your-naming-conventions"
});

Password Compatible Placeholder

Submitted by max.davis on April 6, 2010 - 8:14pm

This jQuery plugin makes it simple to do text input placeholders for your input fields and even works for input of type password elegantly. This is useful for filling the gap until all browsers are HTML 5 compliant.