Form-Placeholder 1.0.5

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!.



Details

Author
Christoph Pojer
Current version
1.0.5
GitHub
cpojer/mootools-form-placeholder
Downloads
1526
Category
Forms
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/Class.Extras
    • Core/Element
    • Core/Element.Event
    • Core/Element.Style
    • Class-Extras/Class.Binds
    • Class-Extras/Class.Singleton

How to use

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

Build

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

Demo

See Demos/index.html


Options

  • value (number, defaults to #777): The color to be used for the placeholder text

Tips

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).


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