jQuery Floating Placeholder Text Plugin - Placeholder Label
File Size: | 214 KB |
---|---|
Views Total: | 14664 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Placeholder Label is a jQuery input placeholder enhancement plugin that displays a floating top aligned label containing placeholder
text when you're typing.
See also:
How to use it:
1. Include the latest version of jQuery library and jQuery placeholder label plugin at the bottom of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="src/jquery.placeholder.label.js"></script>
2. Create an input field with the Html5 placeholder
attribute.
<input id="name" type="text" placeholder="Enter your name" alt="Name" value="jQueryScript">
3. Call the plugin on the input field with default settings.
<script type="text/javascript"> $(document).ready(function (){ $('input[placeholder]').placeholderLabel(); }) </script>
4. All the default settings.
$(document).ready(function (){ $('input[placeholder]').placeholderLabel({ // placeholder color placeholderColor: "#898989", // label color labelColor: "#4AA2CC", // size of label labelSize: "14px" // font style fontStyle: "normal", // uses border color useBorderColor: true, // displayed in the input inInput: true, // time to move timeMove: 200 }); })
5. Style your input field via CSS to fit your needs.
Changelog:
2018-09-11
- Added font-style setting
This awesome jQuery plugin is developed by fabiorogeriosj. For more Advanced Usages, please check the demo page or visit the official website.