We use <textarea> in daily basics. We use it in contact forms, online code editing, WordPress editor, suggestion box etc. Most of the time we keep our textarea box fixed in terms of height and width. We allow scrollbar when text overflows. Its a good idea to have it automatically change its height according to the content. In this post we will see a best fit technique to achieve a automatically expanding textarea.
I have found two ways of doing it. I will provide their implementation now.
Using scrollTop and scrollHeight of textarea
<html>
<head>
<title>Textarea Auto resizing</title>
<style>
textarea
{
resize: none;
overflow: hidden;
}
</style>
<script>
var textarea = null;
window.addEventListener("load", function() {
textarea = window.document.querySelector("textarea");
textarea.addEventListener("keypress", function() {
if(textarea.scrollTop != 0){
textarea.style.height = textarea.scrollHeight + "px";
}
}, false);
}, false);
</script>
</head>
<body>
<textarea placeholder="When text overflows it automatically changes its height and width."></textarea>
</body>
</html>
Here we are checking if the textarea has text scrolled or not. If yes than we make the visible height i.e, style.height equal to visible + invisible height i.e., scrollHeight. For more info on scrollHeight and scrollTop click here
The limitation of this method is the height only increases according to content but never decreases when content is removed.
Using <div>
<html>
<head>
<title>Textarea Auto resizing</title>
<style>
textarea
{
resize: none;
overflow: hidden;
width: 500px;
min-height: 50px;
padding: 2px;
line-height: 13px;
font-size: 13px;
}
div
{
/*Don't make display as none. scrollHeight and offsetHeight is 0 for display property as none.*/
overflow: hidden;
word-wrap: break-word;
white-space: pre-wrap;
width: 500px;
height: 0px;
padding: 2px;
line-height: 13px;
font-size: 13px;
}
</style>
<script>
window.addEventListener("load", function() {
//Don't use keypress event. keypress event doesn't detect backspace and delete keys.
window.document.querySelector("textarea").addEventListener("keydown", function() {
var content = window.document.querySelector("textarea").value;
window.document.querySelector("#divContainer").innerHTML = content;
window.document.querySelector("textarea").style.height = window.document.querySelector("#divContainer").scrollHeight + "px";
}, false);
}, false);
</script>
</head>
<body>
<div id="divContainer">
</div>
<textarea placeholder="When text overflows it automatically changes its height and width."></textarea>
</body>
</html>
We know that height of div element automatically changes according to the content inside it. If overflow is scroll and height is constant as above than we get a scroll bar. Using the scrollHeight property we can get addition visible and non-visible height of the div. We use this technique to flush the content of textarea inside div and receive a height that can fit the content properly. And make the height of textarea same as the scrollHeight of div.
There is no limitation of this method. This is hack around the available features.
Conclusion
Auto expanding textareas are used in many places. It helps the user to read and edit the content easily. scroll bars are not very friendly. If you like this post please Like and Share. Thanks for reading.
