Natural Polyglot Machine

    jquery-autogrow-textarea

    1.3.0 • Public • Published

    jQuery Plugin - AutoGrow Textarea

    Bower version npm version

    Description

    This plugin allows a textarea field to grow vertically with its content. To achieve that, a div element is created with exactly the same styles as the textarea and it is placed after it, but hidden. This div is then used as a mirror of the textarea. This is, each time the user types something, the textarea content is passed to the mirror element and it is then used to calculate the textarea height.

    Test it!

    Check the plugin page if you want to check how it works first.

    Installation

    Install via npm or yarn:

    $ npm i jquery-autogrow-textarea $ yarn add jquery-autogrow-textarea

    Usage

    Include the CSS file on the head of your page by adding the following:

    <link type="text/css" href="/path/to/bower/jquery-autogrow-textarea/dist/jquery.autogrow.min.css" rel="stylesheet">

    Include the minified JS file on body of your page by adding the folllowing:

    <script type="text/javascript" src="/path/to/bower/jquery-autogrow-textarea/dist/jquery.autogrow.min.js"></script>

    Make sure the script is loaded after jQuery.

    Initialize it as follows:

    $('textarea').autogrow()

    Options

    You can also initialize it with the following options:

    • id: the id attribute to add to the mirror element;
    • classes: the classes to add to the mirror element;

    Example:

    $('textarea').autogrow({ id : 'my-textarea-mirror', classes : 'special-textarea-mirror' })

    Note: If there is more than one element on the jQuery collection a index will be appended to the id attribute.

    Events

    If your textarea styles change you can trigger the 'autogrow.resize' event to correct the mirror styles as follows:

    $('textarea').trigger('autogrow.resize')

    Install

    npm i jquery-autogrow-textarea

    DownloadsWeekly Downloads

    223

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    11 kB

    Total Files

    12

    Last publish

    Collaborators

    • bensampaio