Form.Placeholder 1.2

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.



Details

Author
Matthias Schmidt
Current version
1.2
GitHub
MSchmidt/mootools-form-placeholder
Downloads
7252
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.2.5: *

How to use

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.


Options

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
});

Changelog

  • 1.2 - 19.11.2010
    • support for password fields
    • fix issue where placeholder didn't work after a manual browser refresh
  • 1.1 - 08.10.2010
    • first complete release

Known Issues

When a user enters the exact same text as the placeholder, the entered content won't be submitted.


Notes

Page on MooTools Forge: form_placeholder


Credits

Thanks to cpojer for the original implementation of MooTools-Form-Placeholder for MooTools 1.3

Thanks to the whole MooTools Team!


Discuss

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