Create Floating Placeholder From Lable Element - floating-label.js

Yet another jQuery implementation of the Float Label Pattern that creates animated customizable floating placeholders from normal input label elements.

How to use it:

1. Insert the 'floating-label.js' script after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/local/floating-label.js"></script>

2. Note that each input field must have an associated label element as follows:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" value="[email protected]">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. Call the plugin on the input field.

$(function(){
  $("input").floatingLabel();
});

4. Config the transition effect when moving the placeholder to the top of the input field.

$(function(){
  $("input").floatingLabel({
    transition: true,
    transitionProperties: "all",
    transitionDuration: ".2s"
  });
});

5. Customize the text color of the floating label.

$(function(){
  $("input").floatingLabel({
    placeholderColor: "#222"
  });
});

---

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