Provides a fallback for the placeholder property on input elements for older browsers.
Right now the placeholder property is only supported in Webkit browsers and Firefox 4. This plugin will bring it to all the other browsers and will do nothing in browsers with native support.
Include MooTools.Core and Form.Placeholder in your document
<script type="text/javascript" src="mootools-1.2.5-core-yc.js"></script> <script type="text/javascript" src="Form.Placeholder-min.js"></script>
Define a placeholder on your input field and call Form.Placeholder with the ID of the field
<input type="text" id="statusupdate" name="statusupdate" placeholder="What's on your mind?" />
<script type="text/javascript" charset="utf-8">
window.addEvent('domready', function() {
new Form.Placeholder('statusupdate');
});
</script>
Done!
You can have a look at the Examples folder for a complete working example.
color - change the color of the placeholder text, defaults to #A9A9A9 (same as Chrome)
clearOnSubmit - whether the input field gets cleared when parent form is submitted, defaults to true
clearOnSubmit is used to simplify validation on the server-side. The input field will be cleared on submit and therefor you only need to check if the value of the field is blank. (rather than checking whether it equals the placeholder too).
new Form.Placeholder('statusupdate', {
color: '#A9A9A9',
clearOnSubmit: true
});
When a user enters the exact same text as the placeholder, the entered content won't be submitted.
Page on MooTools Forge: form_placeholder
Thanks to cpojer for the original implementation of MooTools-Form-Placeholder for MooTools 1.3
Thanks to the whole MooTools Team!
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus