Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, November 28, 2014

Asp.net: Auto re-size textbox control

Resize Asp.net multiline textbox automatically when we Enter text:



Asp.net MultiLine textbox:


In this post we want to create a simple Example of Asp.net text box control. When we enter data in this text box control we want to the length (re-size height and width) of text box. In this tutorial we give many example related to Asp.net text box as like Limitation of Characters in Asp.net Textbox  , Displaying the textbox value in javascript Messagebox , How to use alert and display textbox value by javascript , Introduction of ASP.NET Server Control Basics , jquery disable or Enable submit button after Textbox validation etc.


We take a Example here in this we consider a text box and try to Auto re-size it when we enter value in text box.

JavaScript function for resize Asp.net control:

Text box auto resize function.

function resizemultilineTextBox(txt) {
            txt.style.height = "1px";
            txt.style.height = (1 + txt.scrollHeight) + "px";
        }

Asp.net web page code with Textbox:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Autoresizetextboxcontrol.aspx.cs" Inherits="Autoresizetextboxcontrol" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
   
    <script>
        function resizemultilineTextBox(txt) {
            txt.style.height = "1px";
            txt.style.height = (1 + txt.scrollHeight) + "px";
        }
    </script>
    <style type="text/css">
        .style1
        {
            color: #990000;
            text-decoration: underline;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <form id="form2" runat="server">
        <div align="center" style="height: 123px; background-color: #6699FF">
        <h1 class="style1">Auto Resize Asp.net TextBox Control</h1>
            <table style="width: 494px">
                <tr>
                    <td>Enter Text Here: </td>
                    <td>                      
                        <asp:TextBox ID="txtDescription" runat="server"
                            onkeyup="resizemultilineTextBox(this)" TextMode="MultiLine" Width="212px"></asp:TextBox>
                      
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>



 Asp.net web server control Post :

No comments:

Post a Comment