Create Animated Placeholders with jQuery and CSS - placeholder.js

placeholder.js is a jQuery plugin that uses label and CSS / CSS3 to create animated placeholders for your text fields (input and textarea). The goal is to add an active CSS class (.text-input-placeholder_state_active) to label tag when input in focus.

How to use it:

1. Include jQuery library and the jQuery placeholder.js plugin on the web page.

<script src="jquery.min.js"></script>
<script src="jquery.placeholder.min.js"></script>

2. Add the CSS class 'js-placeholder' to your text field.

<input class="text-input js-placeholder" id="demo" type="text">

3. Add custom placehoder text to the text fields using label tag instead of placeholder attribute.

<label class="text-input-placeholder js-placeholder-text">Placeholder...</label>

4. Call the plugin on the text field.

$('#demo').placeholder();

5. Animated the placeholder using CSS.

$('#demo').placeholder();

6. Available options.

$('#demo').placeholder({

  // Set class on focus and unset on blur or empty
  activeClass: 'text-input-placeholder_state_active',

  // Use to find input
  inputSelector: '.js-placeholder',

  // Use to find placeholder text
  textSelector: '.js-placeholder-text'
    
});

---

This awesome jQuery plugin is developed by felixexter. For more Advanced Usages, please check the demo page or visit the official website.