amerikan / placeholder-polyfill

Add placeholders to your inputs and textareas in older browsers that don't support the placeholder attribute natively.

placeholder-polyfill

A small jQuery plugin to show placeholders on HTML <input>'s and <textarea>'s in browsers that don't support the placeholder attribute natively.

Demo

Live Demo - the plugin take effect in only browsers that don't support the placeholder attribute natively

Demo with forceMode option - the plugin will take effect in all browsers by force

Requirements

Requires jQuery 1.0+

Usage

First include the placeholder-polyfill plugin after your jQuery:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.placeholder-polyfill.js"></script>

Then initialize:

<script type="text/javascript">
    $(function () {
        $('input, textarea').placeholder();
    });
</script>

<input type="text" placeholder="Enter Username" />
<input type="password" placeholder="Enter Password" />
<textarea placeholder="Enter details"></textarea>

The plugin will then look for any <input> and <textarea> in your page that has the placeholder attribute set and add the placeholder functionality if the browser doesn't support it already natively already. See Can I Use to see what browsers support placeholder natively.

You can also pass options:

<script type="text/javascript">
    $(function () {
        $('input, textarea').placeholder({customClassName: 'my-placeholder'});
    });
</script>

Options Available

customClassName: class name of wrapper. default value: placeholder

forceMode: force a browser to use the plugin functionality even if it supports placeholder natively. Please note, that in such case you will need to use placeholder-x as an attribute rather than placeholder. This is mostly useful for debugging modern browsers. default value: false

Bugs

The development of this plugin just started so it's fairly new. I welcome Pull Requests and bug reports.

Before opening an issue, please check if a similar issue is not already opened. When opening an issue please include:

• browser(s) affected
• test case for me to test
• jQuery version

License

MIT