cferdinandi / cferdinandi/vanilla-js-toolkit
Textarea Auto Height
- Dominant language
- CSS
- Stars
- 91
- Forks
- 14
- PR merge metrics
- No merged PRs in 30d
Description
## Textarea Auto Height
**You may want to use such a function.**
- Inserts the new line in the correct order each time. _Other methods change the time to add new lines as the content gets longer, and they start adding 2 lines after a certain content._
- Also, in this function, the maximum growth height can be defined.
- This function also takes into account the border width.
## Example
https://codepen.io/ionurboz/pen/RwRexRp
## Code
```js
function textareaAutoHeight(el)
{
var elBorderWith = parseInt(getComputedStyle(el).borderWidth) || 0;
el.style.height = 'auto';
var elHeight = el.scrollHeight + (elBorderWith * 2);
var elMaxHeight = parseInt(el.dataset.autoheight || 800);
el.style.overflowY = 'hidden';
if(elHeight > elMaxHeight)
{
elHeight = elMaxHeight;
el.style.removeProperty('overflow-y');
}
el.style.height = (elHeight) + 'px';
};
```
Contributor guide
No contributing guide indexed for this repository
Research direction
The issue provides a standalone JavaScript entry point, textareaAutoHeight, and a CodePen example. Start by comparing the function with the repository's existing snippet organization; no file or test is named in the issue. Done means the requested auto-height behavior, maximum-height handling, and border-width handling are represented in the project.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100