Neatly Positioned Magazines

    input-autogrow

    1.1.1 • Public • Published

    input-autogrow

    NPM Version NPM Downloads Buy Me a Coffee

    Input-Autogrow is a plugin for autogrowing inputs. This plugin is different from others because most usually target textarea tags, this library is instead targeted at input tags.

    Requires a DOM library such as jQuery, Zepto, or any that supports $.fn plugins.

    Demo

    https://jsfiddle.net/xpvt214o/50743/

    Install

    NPM, Yarn, or Bower

    npm install input-autogrow
    
    yarn add input-autogrow
    
    bower install input-autogrow
    

    Rails Install

    # Gemfile 
    source 'https://rails-assets.org' do
      gem 'rails-assets-input-autogrow'
    end
     
     
    # app/assets/javascripts/application.js 
    /*
     *= require input-autogrow
     */

    Usage

    /* Makes input elements autogrow */
    $('input.autogrow').inputAutogrow();
     
    /* Manually trigger update */
    $('input.autogrow').trigger('autogrow');
    /* or */
    $('input.autogrow').trigger('change');
     
    /* Custom Options */
    $('input.autogrow').inputAutogrow({maxWidth: 500, minWidth: 25, trailingSpace: 10});
     
    /* Remove autogrow from input */
    $('input.autogrow').inputAutogrow('destroy');
     
    /* If the parent container width is changed (and maxWidth is not specified)
       OR the options need to be changed, then you must destroy & re-initialize inputAutogrow */
    $('input.autogrow').inputAutogrow('destroy');
    $('input.autogrow').inputAutogrow();

    Options

    maxWidth - The max width of the autogrow - Defaults to the inputs parent width

    minWidth - The min width of the autogrow - Defaults to the inputs original input start width

    trailingSpace - This is extra spacing at the end of the input which is used until the maxWidth is hit - Default: 0

    Contributing

    • Only edit js files from src/ and test/ folders.
    • To run tests: npm run test
    • Remember to run gulp to run the dist build after your done adding and testing your changes.

    Credits

    Created & Maintained by Weston Ganger - @westonganger

    Originally based on this Stackoverflow answer by James Padolsey

    For any consulting or contract work please contact me via my company website: Solid Foundation Web Development

    Install

    npm i input-autogrow

    DownloadsWeekly Downloads

    371

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • westonganger