QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Automatically Resizing Textarea

Automatically Resizing Textarea

textarea-autosize

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

<!doctype html>
<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>

View Demo

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>

<!doctype html>
<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>

View Demo

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.

Apr 26, 2014Narayan Prusty
Content Security Policy Tutorial with ExamplesCustomizing Right Click Menu in HTML Page
Comments: 2
  1. tim
    7 years ago

    very good tutiorial recommended to all i also recommend a tutorial which i also find very easy to code and implement to create auto resizing textarea
    http://talkerscode.com/webtricks/facebook-like-auto-expanding-textarea-using-javascript-and-css.php

    ReplyCancel
  2. Chen Chen
    7 years ago

    Hi there,

    First of all, thank you for the solution.
    The expansion of the textarea is all great. However, I think it is a potential issue that when you start removing content in the textarea, the height does not go back – it stays the same size.

    Chen

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 2 Comments Web Developmentscrollheight, scrolltop, textarea
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Using scrollTop and scrollHeight of textarea
  • Using <div>
Related Articles
  • Create Raining Effect using JavaScript
  • Change WordPress Automatic Save Interval
  • Understanding HTML img tag
  • HTML Table Designing and Best Practices with Examples
  • Creating a Percentage of Webpage Scrolled Indicator
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license