Skip to content

A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet

License

GPL-2.0, MIT licenses found

Licenses found

GPL-2.0
LICENSE-GPL.txt
MIT
LICENSE-MIT.txt
Notifications You must be signed in to change notification settings

jameswragg/Placeholder-jQuery-Plugin

 
 

Repository files navigation

HTML5 Placeholder jQuery Plugin

Demo & Examples

http://mathiasbynens.be/demo/placeholder

Example Usage

HTML

<input type="text" name="name" placeholder="e.g. John Doe">
<input type="email" name="email" placeholder="e.g. [email protected]">
<input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/">
<input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
<input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
<input type="search" name="search" placeholder="Search this site…">
<textarea name="message" placeholder="Your message goes here"></textarea>

jQuery

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

CSS

The plugin automatically adds class="placeholder" to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:

input, textarea { color: #000; }
.placeholder { color: #aaa; }

Notes

  • Works in all A-grade browsers, including IE6.

  • Automatically checks if the browser natively supports the HTML5 placeholder attribute for input and textarea elements. If this is the case, the plugin won’t do anything. If @placeholder is only supported for input elements, the plugin will leave those alone and apply to textareas exclusively. (This is the case for Safari 4, Opera 11.00, and possibly other browsers.)

  • Caches the results of its two feature tests in jQuery.fn.placeholder.input and jQuery.fn.placeholder.textarea. For example, if @placeholder is natively supported for input elements, jQuery.fn.placeholder.input will be true. After loading the plugin, you can re-use these properties in your own code.

  • Makes sure it never causes duplicate IDs in your DOM, even in browsers that need an extra input element to fake @placeholder for password inputs. This means you can safely do stuff like:

    <label for="bar">Example label</label>
    <input type="password" placeholder="foo" id="bar">

    And the <label> will always point to the <input> element you’d expect. Also, all CSS styles based on the ID will just work™.

License

This plugin is dual licensed under the MIT and GPL licenses, just like jQuery itself.

Credits

Kudos to Paul Irish for his inspiring snippet in jQuery 1.4 Hawtness #1 and everyone from #jquery for the tips, ideas and patches. Much ♥ to temp01 for his major contributions.

Mathias

About

A jQuery plugin which enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet

Resources

License

GPL-2.0, MIT licenses found

Licenses found

GPL-2.0
LICENSE-GPL.txt
MIT
LICENSE-MIT.txt

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%