cferdinandi / cferdinandi/vanilla-js-toolkit
Adding Auto-Expanding Textarea
- Dominant language
- CSS
- Stars
- 91
- Forks
- 14
- PR merge metrics
- No merged PRs in 30d
Description
I noticed at the bottom of the readme there was a todo to add the auto-expanding textarea. I thought I might take a crack at it:
```css
/* CSS from the article in the TODO */
textarea {
min-height: 5em;
max-height: 50vh;
width: 100%;
}
```
```js
(function() {
var autoExpand = function(field) {
field.style.setProperty('height', 'inherit'); // supported back to IE 9
var computed = window.getComputedStyle(field),
height = parseInt(computed.getPropertyValue('border-top-width'), 10)
+ parseInt(computed.getPropertyValue('padding-top'), 10)
+ field.scrollHeight
+ parseInt(computed.getPropertyValue('padding-bottom'), 10)
+ parseInt(computed.getPropertyValue('border-bottom-width'), 10);
field.style.setProperty('height', height + 'px')
}
document.addEventListener('input', function(event) {
if (event.target.tagName !== 'TEXTAREA') return; // removed `.toLowerCase()`
autoExpand(event.target)
}, false)
})();
```
I tried to use the same sensible patterns I've seen in your blog posts. I did opt for using `.setProperty()` instead of `el.style.prop = 'value';`. It's got support back to IE 9, and it matches the same syntax as the `.getPropertyValue()`. I also removed the `.toLowerCase()`.
Hopefully this helps, it's one of my favorite utilities and I'd love for more people to know about it 🙂
Utility for parsing multiple computed properties
// Just for fun :)
var parseStyles = function() {
var args = Array.prototype.slice.call(arguments),
out = 0;
for (var i = 1; i < args.length; i++) {
out += parseInt(args[0].getPropertyValue(args[i]), 10)
}
return out
}
parseStyles(window.getComputedStyles(field), 'border-top-width', 'padding-top', 'padding-bottom', 'border-bottom-width');
Contributor guide
No contributing guide indexed for this repository
Research direction
Start from the README TODO for the auto-expanding textarea and locate the corresponding utility or snippet entry in the repository. Compare the proposed CSS and JavaScript with the project's existing patterns, then verify that textarea height expands with input while respecting the stated minimum and maximum heights.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100