cferdinandi / cferdinandi/vanilla-js-toolkit

Adding Auto-Expanding Textarea

Open
#11 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.