jquery.autobox

    3.1.0 • Public • Published

    Autogrow <textarea> while typing

    Resize the <textarea> (vertically or horizontally) automatically to fit the contents.

    devDependencies

    Getting Started

    Download the production version or the development version or use unpkg version directly in your HTML.

    In your web page:

    <script src="jquery.js"></script>
    
    <!-- Include local copy of the lib -->
    <script src="dist/jquery.autobox.min.js"></script>
    
    <!-- or CDN version -->
    <script src="//unpkg.com/jquery.autobox"></script>
    
    <script>
    jQuery(function($) {
    
        // Bind autobox events to all TEXTAREAs in `.myView` and it's descendants, animation speed 200ms and delay before restoring size 400ms
        $('.myView').autoboxBind({ speed: 200, delay: 400 });
    
        // Bind autobox events to `document`, listening on `textarea.autobox` elements.
        $(document).autoboxOn('textarea.autobox');
    
        // Bind autobox events to `document`, listening on `textarea.autobox` elements, with horizontal autogrow.
        $(document).autoboxOn('textarea.autoboxh', { resize: 'horizontal' });
    
        // Bind autobox events to `document`, listening on `textarea.autobox` elements, don't shrink after blur.
        $(document).autoboxOn('textarea.autoboxp', { permanent: true });
    
        // Adjust once Height of all TEXTAREAs in `.myView` and it's descendants.
        $('.myView').autobox({ resize: 'vertical' });
    
        // Adjust once Height and/or Width of all TEXTAREAs in `.myView` and it's descendants.
        $('.myView').autobox();
    });
    </script>

    If you are using a build system:

    import jQuery from 'jquery'; // we need jQuery
    import autobox from 'jquery.autobox'; // import the init function of the plugin
    
    autobox(jQuery); // init the plugin on this copy of jQuery

    Documentation

    This plugin exports three jQuery methods:

    • $(sel).autobox(options) - Adjust Height/Width of all TEXTAREAs in this and it's descendants
    • $(sel).autoboxOn(sel, options) - Bind Auto Height/Width Adjustment events to matched element, listening on sel elements
    • $(sel).autoboxBind(options) - Bind Auto Height/Width Adjustment events to all TEXTAREAs in this and it's descendants
    • $.autobox(elements, options) - same as $(elements).autobox(options)

    Options:

    • permanent: bool - if false (default), the textarea would restore its size on blur
    • resize: "" | "vertical" | "horizontal" - resize mode, leave empty for auto-detection
    • speed: number - restore height animation speed (default 0 - no animation)
    • delay: number - delay before restoring textarea height on blur (default 250 milliseconds)

    Examples

    <table class="autobox">
        <tr><td>Text field #1</td><td><textarea resize="vertical">Some very important contents</textarea></td></tr>
        <tr><td>Text field #2</td><td><textarea resize="horizontal">Ulgy resize, but may be useful sometimes</textarea></td></tr>
        <tr><td>Text field #3</td><td><textarea style="resize:vertical">CSS resize works too</textarea></td></tr>
    </table>
    
    <script>
    $('body').autoboxOn('.autobox', { permanent: false, resize: '' }); // All textareas inside .autobox elements would be autoboxed
    </script>

    Live example on DUzun.Me.

    Release History

    v3.0.0

    In AMD, CommonJs and ES6 modules jquery.autobox exports the init function only and doesn't initialize automatically.

    See Getting Started above.

    Install

    npm i jquery.autobox

    DownloadsWeekly Downloads

    7

    Version

    3.1.0

    License

    none

    Unpacked Size

    72.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • duzun