🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

placeholder.js is a jQuery plugin that uses label and CSS / CSS3 to create animated placeholders for your text fields (input and textarea).

Input-label Placeholder

Documentation

jquery.placeholder.js

Useful placeholder for text input and textarea.

Use

  • Set jQuery & jQuery.Placeholder.js.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="jquery.placeholder.min.js"></script>
  • Add markup.
<div class="text-input-block">     <input class="text-input js-placeholder" id="textInput" type="text" name="text">     <label class="text-input-placeholder js-placeholder-text">Enter me...</label> </div>
  • Init plugin.
// Simple init $('.js-placeholder').placeholder();  // Default options $('.js-placeholder').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' });

License

Released under the MIT license.


You May Also Like