- 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
- Fix jQuery.val() function to work as expected to set/get the value of inputs with placeholder
- Lightweight: 889 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 and 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
- Organize the plugin code using prototype? could be useful having two different prototypes dependening if modern browser or not.
- Create a kimbo.js plugin version.
- Creat a plain JavaScript version.
- Create two separate versions.
- Version 1.x to give full cross-browser support and normalization.
- Version 2.x only to normalize modern browsers placeholder behaviour.
See LICENSE.txt