Create Floating Placeholder From Lable Element - floating-label.js
File Size: | 11.7 KB |
---|---|
Views Total: | 1101 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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="admin@jqueryscript"> <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.