Saturday, June 6, 2015

Auto Resize TextBox

Auto Resize text Box
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .clsTxt {
            width: 200px;
            min-height: 25px;
            max-height: 200px;
            resize: none;
        }
    </style>
    <script>
        function resizeTextBox(txt) {
            txt.style.height = "1px";
            txt.style.height = (1 + txt.scrollHeight) + "px";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Description: </td>
                    <td>                       
                        <asp:TextBox ID="txtDescription" CssClass="clsTxt" runat="server"onkeyup="resizeTextBox(this)" TextMode="MultiLine"></asp:TextBox>
                        <%--<textarea class="clsTxt" onkeyup="resizeTextBox(this)"></textarea>--%>
                    </td>
                </tr> 
            </table> 
        </div>
    </form>
</body>
</html>




Note: In this article I have demonstrated the concept using asp.net 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>