This content originally appeared on Go Make Things and was authored by Go Make Things
Three years ago, I shared an approach for creating autoexpanding textarea elements with vanilla JS. On a recent project, I decided to search for a more modern way to automatically expand textarea elements as the user types, and stumbled upon this solution from Stephen Shaw that I think is far superior.
First, you wrap your textarea in a div.
<label for="content">Type something</label>
<div class="autogrow">
<textarea id="content"></textarea>
</div>You use CSS Grid to link the sizing of the parent div and the textarea together. They’ll both have the height of whichever one is biggest.
.autogrow {
display: grid;
}
.autogrow > textarea,
.autogrow::after {
/* Add textarea styles here so that the textarea and div look the same */
grid-area: 1 / 1 / 2 / 2;
}Whenever the user types, you add that text to the a data attribute, [data-replicated-value], on the parent div.
You could use an external event listener for this, but a simple onInput event works as well.
<label for="content">Type something</label>
<div class="autogrow">
<textarea id="content" onInput="this.parentNode.setAttribute('data-replicated-value', this.value)"></textarea>
</div>Finally, you use the CSS content property and attr() function to display a copy of the textarea content after the div, but you visually hide it with visibility: hidden.
This prevents it from being displayed or read aloud by screen readers, but it will still occupy space in the UI. The white-space: pre-wrap property is needed to ensure it wraps properly. We also want to prevent users from resizing the textarea, as that will break the link.
.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;
}One little quirk I found is that if the textarea is being preloaded with content, it will not be the expanded height on iOS. I added an onload event to fix that.
<label for="content">Type something</label>
<div class="autogrow">
<textarea id="content" onInput="this.parentNode.setAttribute('data-replicated-value', this.value)" onload="this.parentNode.setAttribute('data-replicated-value', this.value)"></textarea>
</div>
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2021-10-29T14:30:00+00:00) Autogrowing textareas. Retrieved from https://www.scien.cx/2021/10/29/autogrowing-textareas/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.