Auto resize textarea or multiline textbox based on content using javascript

Introduction: In this article I am going to share the JavaScript trick to automatically increase or resize the height of text area or multiline text box according to the text content being written in it.

Implementation: Let’s create a sample web page to demonstrate the concept.

HTML Source

<html xmlns="">
<head runat="server">
    <style type="text/css">
        .clsTxt {
            width: 200px;
            min-height: 25px;
            max-height: 200px;
            resize: none;
        function resizeTextBox(txt) {
   = "1px";
   = (1 + txt.scrollHeight) + "px";
    <form id="form1" runat="server">
                    <td>Description: </td>
                        <asp:TextBox ID="txtDescription" CssClass="clsTxt" runat="server" onkeyup="resizeTextBox(this)" TextMode="MultiLine"></asp:TextBox>
                        <%--<textarea class="clsTxt" onkeyup="resizeTextBox(this)"></textarea>--%>

Note: In this article I have demonstrated the concept using multiline textbox. But if you want to implement it on HTML textarea then use
<textarea class="clsTxt" onkeyup="resizeTextBox(this)"></textarea>
Instead of<asp:TextBox ID="txtDescription" CssClass="clsTxt" runat="server" onkeyup="resizeTextBox(this)" TextMode="MultiLine"></asp:TextBox> 
One more point to notice in the class (.clsTxt) that I have written max-height: 200px; so when textbox height reaches 200px then its height will not increase further and vertical scrollbar will appear as shown in demo image above. But if you don’t want this then remove max-height: 200px; from the class (.clsTxt) and it will infinitely increase its height based on content.
Now over to you:
" I hope you have got the trick to auto resize textarea or  multiline textbox based on text content using javascript and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates." 
Next Post »


Click here for comments
September 02, 2015 ×

thanks for your feedback..stay connected and keep reading

November 06, 2015 ×

works like a charm!!!!!!

November 20, 2015 ×

Thanks for your valuable comment..Stay connected and keep reading for more useful updates.


If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon