Introduction

This article describes how to change the size of a TextBox at run time using jQuery. The TextBox size can be changed in pixels.

The following is the example.

  1. Create a web API application as in the following:
    • Start Visual Studio 2012.
    • From the start window select "Installed" -> "Visual C#" -> "Web".
    • Select "ASP.NET MVC4 Web Application" and click on the "OK" button.

      Select MVC4 Web Application

    • From the "MVC4 Project" window select "Web API".

      Select Web API

    • Click on the "OK" button.
  2. Now add the following code in the index.cshtml file:
    • In the "Solution Explorer".
    • Expand the "Home" folder.
    • Then select the "index.cshtml" file.

      Select Index View

Add the following code:

  1. @{
  2. ViewBag.Title = "Index";
  3. }
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. function IncreaseTextboxSize() {
  7. var textsize = $('#txtwidth').val();
  8. $("#txtname").css("width", textsize);
  9. $("#message").html("Currently textbox Size is " + textsize + "px.");
  10. }
  11. </script>
  12. <h2>
  13. Dynamically change TextBox Size</h2>
  14. <br />
  15. Type TextBox Width: <input type="text" id="txtwidth" />px
  16. <input type="button" value="Change Size" onclick="javascript: IncreaseTextboxSize();" /><br />
  17. <br />
  18. <br />
  19. @Html.TextBox("TextBoxName", "", new { @id = "txtname" })
  20. <div id="message" style="color:blue;font-size:20px;"></div>

In the code above the following code is used to change the size of TextBox:

  1. <script type="text/javascript">
  2. function IncreaseTextboxSize() {
  3. var textsize = $('#txtwidth').val();
  4. $("#txtname").css("width", textsize);
  5. $("#message").html("Currently textbox Size is " + textsize + "px.");
  6. }
  7. </script>

Now execute the application; the output will be as:

Index View


Increase the size of the TextBox:

Increase size of Textbox

Decrease the size of the TextBox:

Decrease size of Textbox