jQuery Plugin To Resize Text As You Input - Liquid Input

File Size: 87.4 KB
Views Total: 421
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Resize Text As You Input - Liquid Input

Liquid Input is a small and user friendly jQuery plugin used to resize the text size of an input field based on the filled content you input.

How to use it:

1. Include jQuery javascript library and the jQuery Liquid Input plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/liquidinput.js"></script> 

2. Create a standard Html text input on your web page.

<input type="text" class="liquid" placeholder="Type here">

3. Call the plugin on the input field you created and set the minimum font size.

<script>
$('.liquid').liquidInput(0.75);
</script>

4. You must set width and height to input, or it's size will comply the font size.

input {
height: 36px;
width: 100%;
...
}

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