Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/westonganger/input-autogrow
jQuery plugin for autogrowing inputs
https://github.com/westonganger/input-autogrow
autogrow autogrowing-inputs autosize html html-forms html-input input jquery
Last synced: 2 months ago
JSON representation
jQuery plugin for autogrowing inputs
- Host: GitHub
- URL: https://github.com/westonganger/input-autogrow
- Owner: westonganger
- License: mit
- Created: 2016-08-20T15:49:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-09-01T15:48:51.000Z (over 2 years ago)
- Last Synced: 2024-10-04T19:18:07.033Z (3 months ago)
- Topics: autogrow, autogrowing-inputs, autosize, html, html-forms, html-input, input, jquery
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# input-autogrow
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
```
#### CDN
```
```
#### Rails-Assets
```ruby
# Gemfile
source 'https://rails-assets.org' do
gem 'rails-assets-input-autogrow'
end
# app/assets/javascripts/application.js
/*
*= require input-autogrow
*/
```
# Usage
```javascript
/* 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](https://github.com/westonganger)
Originally based on this [Stackoverflow answer](http://stackoverflow.com/questions/931207) by James Padolsey