This package contains a TextareaAutoSize ES6 class for vertically adjusting a textarea based on user input and controlling any presentation in CSS. No clone or ghost elements are used. No jQuery dependency either, just plain vanilla JS. 😉
This was a fun project I started in Aug 2012 as a jQuery plugin. Nowadays, the same hack can be implemented using vanilla JS with such little code that I don't recommend using this package. Instead just implement the component code in your project so it can be modified to your requirements.
Another option is to use CSS only as Chrome and Edge support the field-sizing: content; rule (example)
npm install textarea-autosize
Import the script and find the desired textarea elements on which to initialize the component with.
<textarea class="js-auto-size" rows="1"></textarea>
<script type="module">
import { TextareaAutoSize } from './textarea-autosize'
const wrapper = new TextareaAutoSize(document.querySelector('textarea.js-auto-size'))
</script>In the following example, the minimum height is one line of text which is determined from the inherited font size, line height, and vertical padding. So if your font-size is 16px, line-height is 1.5, top/bottom padding is 6px each, then the minimum height would be 36px since 16 * 1.5 + 12 = 36.
textarea {
box-sizing: border-box;
max-height: 160px; /* optional but recommended */
min-height: 38px;
}Increase the min-height to have more initial rows. Once text exceeds that minimum height the textarea will expand naturally until it reaches the maximum height if declared.
If you pre-fill the textarea before page load the textarea will adjust to fit automatically but if given a value after page load (e.g. single page app) then you will need to trigger an update on the textarea after setting its value for it to size correctly.
wrapper.update()Calling the destroy method will remove the event handler and release the element reference.
wrapper.destroy()- Install Node.js v18+
npm installnpx playwright installnpm testnpm run start
Replace {type} with any of the following: patch, minor or major
npm version {type}
git push origin --tags
npm run predeploy && npm publish
Run npm run deploy to release on GitHub Pages using gh-pages package.