Improved placeholder behaviour for input fields and content editable divs.
Placeholder gives you a few options for placeholder behaviour:
- Placeholder text can be specified by either adding a data-placeholder attribute to the element, or adding a label before the element with the placeholder text.
- The placeholder can slide to the right when the field is selected, and optionally vanish after a configurable number of characters are typed.
- The placeholder can also be configured to vanish when the content is entered, and reappear when it is removed (like a html5 placeholder).
.placeholder() on an text field, textarea, or content editable
div. Ensure that this element either has a data-placeholder attribute with the
placeholder text, or a label preceding it with the desired placeholder
text. The attribute supercedes the label.
The placeholder will be given a
placeholder class, and the element to
which it belongs a
placeheld class. You can use these to add style to
the element if desired.
By default the placeholder will slide to the right when the field is
selected, to prevent this, and simply have it disappear when content is
entered, pass the option
By default, when
true, the placeholder will disappear after
five characters are entered. To change this, set the
vanishing_length option. This option is ignored if
The pluggin accounts for padding on the editable element in order to
position the placeholder text correctly. You can also set the padding
using the padding_X attributes, or by styling the
in your css.
Focus and Blur speeds
The speed with which the placeholder slides can be customized with the
The base.html file contains a few test cases that can be used as examples.
Checkout the login page of OpusWorkspace for an example of the sliding effect.
.placeholder() is called prior to the element being rendered in the
DOM (which often happens in frameworks like backbone.js), the padding
will not be computed properly. There are two solutions to this:
1. You can set it yourself, by either styling the 'placeholder' class,
or by setting the
padding-X options mentioned above.
2. You can ensure you only call it after rendering is complete.