Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

jquery-placeholder

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

Subscribe to updates I use jquery-placeholder


Statistics on jquery-placeholder

Number of watchers on Github 4145
Number of open issues 28
Average time to close an issue 3 months
Main language JavaScript
Average time to merge a PR 10 days
Open pull requests 2+
Closed pull requests 33+
Last commit over 2 years ago
Repo Created over 9 years ago
Repo Last Updated over 1 year ago
Size 128 KB
Homepage https://mths.be/p...
Organization / Authormathiasbynens
Latest Releasev2.3.1
Contributors21
Page Updated
Do you use jquery-placeholder? Leave a review!
View open issues (28)
View jquery-placeholder activity
View on github
Fresh, new opensource launches πŸš€πŸš€πŸš€
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating jquery-placeholder for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

HTML5 Placeholder jQuery Plugin

Demo & Examples

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

Example Usage

HTML

<input type="text" name="name" placeholder="e.g. John Doe">
<input type="email" name="email" placeholder="e.g. address@example.ext">
<input type="url" name="url" placeholder="e.g. https://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

Use the plugin as follows:

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

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

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

Youll still be able to use jQuery#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 elements value to the empty string will result in the placeholder text (re)appearing.

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

Id suggest sticking to the #aaa color for placeholder text, as its the default in most browsers that support @placeholder. If you really want to, though, you can style the placeholder text in some of the browsers that natively support it.

Installation

You can install jquery-placeholder by using Bower.

bower install jquery-placeholder

Or you can install it through npm:

npm install --save jquery-placeholder

Contributors should install the dev dependencies after forking and cloning via npm.

npm install

Notes

  • Requires jQuery 1.6+. For an older version of this plugin that works under jQuery 1.4.2+, see v1.8.7.
  • 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 wont 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.
  • 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 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 youd expect. Also, all CSS styles based on the ID will just work.

License

This plugin is available under the MIT license.

Thanks to

_ Mathias_

jquery-placeholder open issues Ask a question     (View All Issues)
  • about 3 years it not word in display:none element?
  • over 3 years Placeholders getting disappeared after exporting csv.
  • over 3 years Compatibility issue with jquery.pwstrength.bootstrap in IE9
  • over 3 years feature request: option for placeholder class in native-supporting browsers
  • over 3 years IE9-7? When using $('selector')[0].value = "bbb..." the placeholder text won't get removed
  • almost 4 years IE10 below javascript:void(0) anchor breaking also when click on link children
  • almost 4 years Can't dynamically modify the placeholder text
  • about 4 years with requirejs error
  • over 4 years The placeholder text does not clear up when click is on an <object> after focus
  • over 4 years Placeholder text gets submitted to the server.
  • over 5 years Issue when doing a partial postback on an ASP.NET website
  • over 5 years IE9 document.activeElement bug when in iframe
  • over 5 years Keep the init visible state
  • over 5 years The placeholder gets converted into value upon toUpperCase operations. - IE 9
  • over 6 years Multiple password fields issue
  • over 6 years IE9-7? When using $('selector').val('foo') the placeholder text won't get removed
  • almost 7 years IE<=9 blur.placeholder
  • about 7 years Do not delete on focus but on start of typing
  • over 7 years Placeholder in copied code
  • over 7 years Compatibility with jQuery validation
  • almost 9 years Problems with saved passwords
jquery-placeholder open pull requests (View All Pulls)
  • timeout has been increased in order to prevent submitting placeholder values
  • Update jquery.placeholder.js
jquery-placeholder questions on Stackoverflow (View All Questions)
  • jquery placeholder form submit in ie
  • Password input field border with CSS3 PIE and jQuery placeholder dissapearing on IE8
  • jquery placeholder while ajax loads dropdown menu
  • jquery placeholder not working in ie
  • Issues with Jquery Placeholder Plugin
  • Jquery placeholder plugin to display the password as text
  • jQuery Placeholder & Master Pages
  • jquery placeholder plugin 'jQuery is not defined'
  • jquery placeholder function: When the input is empty, placeholder value is sent
  • Placeholders disapears after validation fails using jQuery Validate and jQuery Placeholder Enhanced
  • jQuery placeholder that shows the placeholder until text is typed
  • Clear jQuery placeholder on submit
  • How to get jQuery placeholder/watermark plugin to work for ajax loaded text fields?
  • JQuery placeholder HTML5 simulator
  • jQuery Placeholder Plugin - what am I doing wrong?
  • None jquery placeholder fallback?
  • jQuery placeholder/hint JavaScript that keeps the hint on focus
jquery-placeholder list of languages used
jquery-placeholder latest release notes
v2.3.1 Minor bug fix
  • Bug fix: Properly exclude [type=hidden] inputs by using [type=hidden] rather than :hidden
v2.3.0 Fixed javascript:void(0) anchor usage from breaking the plugin

Fixed javascript:void(0) anchor usage from breaking the plugin

v2.2.0 Password placeholder bug fixes
  • Fixes password placeholders for password fields not wrapped in a container element
Other projects in JavaScript