jQuery Plugin For Dynamic Resizing Of Text Field - rubber.js

jQuery Plugin For Dynamic Resizing Of Text Field - rubber.js

jQuery PluginsjQuery Form PluginsjQuery rubber.js

jQuery Plugin For Dynamic Resizing Of Text Field - rubber.js

rubber.js is a small yet useful jQuery plugin that dynamically stretches and shrinks an input field based on the text length while typing. The plugin automatically stops stretching as the input field reaches the width of its container.

Note: The plugin only works with text and password input fields.

Alternative plugins:

See also:

How to use it:

1. Include both jQuery library and the jQuery rubber.js on the web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.rubber.js"></script>

2. Call the function on the text field and the plugin will take care of the rest.

<input type="text">
$(function(){
  $('input').rubber();
});

3. You can also define the initial and max width of the input field in the CSS.

input { 
  width: 300px;
  max-width: 728px;
}

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

  • Publication date: 19.01.2018
  • Source