JavaScript/CSS/HTML || Placeholder.js – Simple Animated Floating Label For Textbox, Dropdown & Textarea Using Vanilla JavaScript

Print Friendly, PDF & Email

The following is a module which allows for a simple animated floating placeholder label for textbox, dropdown & textarea using vanilla javascript.

No special HTML markup is required.

Placeholder.js & CSS Source

Contents

1. Basic Usage
2. Placeholder HTML
3. Placeholder.js & CSS Source
4. More Examples

1. Basic Usage

Syntax is very straightforward. The following demonstrates adding and removing floating placeholders to elements.

Placeholder.float‘ and ‘Placeholder.remove‘ accepts either a string selector or one or more Javascript elements.


2. Placeholder HTML

The following is sample HTML used for the floating placeholder label. No special HTML markup is required. Simply supply an element with a ‘placeholder‘ attribute, and you’re all set!

Sample – Blank:

Sample

Sample – Filled:

Sample


3. Placeholder.js & CSS Source

The following is the Placeholder.js Namespace & CSS Source. Include this in your project to start using!

The following is Placeholder.css.


4. More Examples

Below are more example demonstrating the use of ‘Placeholder.js‘. Don’t forget to include the module when running the examples!

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Leave a Reply