Repository files navigation

https://mathiasbynens.github.io/jquery-placeholder/

<inputtype="text"name="name"placeholder="e.g. John Doe"><inputtype="email"name="email"placeholder="e.g. address@example.ext"><inputtype="url"name="url"placeholder="e.g. https://mathiasbynens.be/"><inputtype="tel"name="tel"placeholder="e.g. +32 472 77 69 88"><inputtype="password"name="password"placeholder="e.g. h4x0rpr00fz"><inputtype="search"name="search"placeholder="Search this site…"><textareaname="message"placeholder="Your message goes here"></textarea>

Use the plugin as follows:

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

By default,.placeholder css class will be added. You can override default by passing thecustomClass option:

$('input, textarea').placeholder({customClass:'my-placeholder'});

You’ll still be able to usejQuery.val() to get and set the input values. If the element is currently showing a placeholder,.val() will return an empty string instead of the placeholder text, just like it does in browsers with a native@placeholder implementation. Calling.val('') to set an element’s value to the empty string will result in the placeholder text (re)appearing.

The plugin automatically addsclass="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; }

I’d suggest sticking to the#aaa color for placeholder text, as it’s the default in most browsers that support@placeholder. If you really want to, though, you canstyle the placeholder text in some of the browsers that natively support it.

You can install jquery-placeholder by usingBower.

bower install jquery-placeholder

Or you can install it throughnpm:

npm install --save jquery-placeholder

Contributors should install the »dev dependencies« after forking and cloning vianpm.

npm install

• Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, seev1.8.7.

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

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

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

• Using<input type="reset" /> will break the plugin functionality

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

  <labelfor="bar">Example label</label><inputtype="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™.

This plugin is available underthe MIT license.

• Paul Irish for his inspiring snippet injQuery 1.4 Hawtness #1
• everyone from#jquery for the tips, ideas and patches
• anyone whocontributed a patch ormade a helpful suggestion

–Mathias