This content originally appeared on Go Make Things and was authored by Go Make Things
Last year, I wrote an article sharing Stephen Shaw’s awesome trick for simple, autogrowing textarea elements.
It uses a wrapper element, CSS grid, and a sprinkling of vanilla JS, and it works wonderfully! But… if your textarea has text in it when the page loads, it doesn’t work.
.autogrow {
display: grid;
}
.autogrow::after {
content: attr(data-replicated-value) " ";
white-space: pre-wrap;
visibility: hidden;
}
.autogrow > textarea {
resize: none;
}
.autogrow > textarea,
.autogrow::after {
/* Add textarea styles here so that the textarea and div look the same */
grid-area: 1 / 1 / 2 / 2;
}<label for="content">Type something</label>
<div class="autogrow">
<textarea id="content" onInput="this.parentNode.setAttribute('data-replicated-value', this.value)"></textarea>
</div>The fix? A function with five lines of JavaScript that assign a default [data-replicated-value] value for each .autogrow field.
function setAutogrow () {
let autogrow = document.querySelectorAll('.autogrow');
for (let field of autogrow) {
if (!field.value) continue;
field.setAttribute('data-replicated-value', field.value);
}
}
Run this after your HTML loads, and any textarea elements with text in them will automatically resize to match the text size.
⏰🦉 Early Bird Sale! Today through Monday, get 40% off registration in the next session of the Vanilla JS Academy.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-03-15T14:30:00+00:00) How to automatically size a textarea based on its using vanilla JavaScript. Retrieved from https://www.scien.cx/2022/03/15/how-to-automatically-size-a-textarea-based-on-its-using-vanilla-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.