Provides a fallback for the placeholder property on input elements for older browsers. Does not actually do anything in modern browsers.
This Plugin is part of MooTools PowerTools!.
Build via Packager, requires MooTools Core and MooTools Class-Extras to be registered to Packager already
packager register /path/to/form-placeholder
packager build Form-Placeholder/* > form-placeholder.js
To build this plugin without external dependencies use
packager build Form-Placeholder/* +use-only Form-Placeholder > form-placeholder.js
See Demos/index.html
Create a new instance of Form.Placeholder for your TextArea-Element
new Form.Placeholder('myInput', options);
To check if the browser supports placeholders use
if (Form.Placeholder) // This browser supports placeholders
- value (number, defaults to #777): The color to be used for the placeholder text
Use the following tips to get most out of Form.Placeholder.
Style the color of the placeholder via CSS
/* Firefox */
input:-moz-placeholder {
color: #000;
}
/* Webkit */
input::-webkit-input-placeholder {
color: #000;
}
Note that not all modern browsers support to modify the placeholder color yet. If you absolutely need to change the placeholder color, you can force using Form.Placeholder
<script type="text/javascript">
// Force usage of Form.Placeholder in *all* browsers
var supportsPlaceholder = false;
</script>
Note: Currently, in browsers without placeholder support, typing the same value as the placeholder will remove the content when you focus the input element again. Given that usually the placeholder is not a useful input value in the context of an application this is intentional. However, I am happy to pull from a fork if someone chooses to fix this (in a sane and simple way).