- Cross-browser & Cross-styling
- Support for all input types, password, textarea, text, email, search, url, etc...
- Robust: it heavely behave as the HTML5 placeholder defined in the specs
- Normalize placeholder behaviour in modern browsers (optional). This means the placeholder will hide on input focus.
- Fix jQuery.val() function to work as expected to set/get the value of inputs with placeholder
- Lightweight: 970 bytes minified & gzipped
Requires jQuery 1.4.4 or higher
Just include the js file after jQuery on your HTML page and the plugin will be automatically initialized
<script src="jquery.js"></script>
<script src="jquery.placeholder-enhanced.js"></script>
If you want to initialize the plugin yourself after the first auto-initialize (for example after ajax content being loaded), just call the plugin like this:
$('input[placeholder], textarea[placeholder]').placeholderEnhanced();
Initialize the plugin after loading an HTML page via AJAX, call the plugin after the content is loaded.
$(function () {
$.get('file.html', function (html) {
$('#container')
// append the html
.append(html)
// find any inputs or textareas with placeholder and initialize the plugin
.find('input[placeholder], textarea[placeholder]').placeholderEnhanced();
});
})
If you want to destroy the plugin call:
$('input[placeholder], textarea[placeholder]').placeholderEnhanced('destroy');
It will automatically clean all what the plugin first created as if it was never initialized, only for the selected elements.
Customize the style of the placeholder with CSS in a cross-browser manner:
For a demo see demo.html online
These are not major tasks, but nice to have:
- Create a kimbo.js plugin version.
- Create a plain JavaScript version?
- Create two separate versions.
- Version 1.x to give full cross-browser support and normalization. (current version)
- Version 2.x only to normalize modern browsers placeholder behaviour.
See LICENSE.txt