Need help with jquery-placeholder?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mathiasbynens
4.1K Stars 1.4K Forks MIT License 166 Commits 28 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

HTML5 Placeholder jQuery Plugin

Demo & Examples

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

Example Usage

HTML





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:
js
$('input, textarea').placeholder({ customClass: 'my-placeholder' });

You’ll 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 element’s 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; }

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 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 won’t do anything. If
    @placeholder
    is only supported for
    input
    elements, the plugin will leave those alone and apply to
    textarea
    s 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
     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:
    
    
    

    And the

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

License

This plugin is available under the MIT license.

Thanks to…

Mathias

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.