Reader Level:
Articles

Dynamically Change Size of Textbox in Web API Using jQuery

By Mudita Rathore on October 10, 2013
This article describes how to change the size of textbox at run time using jQuery.
  • 0
  • 0
  • 4615

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.
  1. 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:

@{

    ViewBag.Title = "Index";

}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

<script type="text/javascript">

    function IncreaseTextboxSize() {

        var textsize = $('#txtwidth').val();

        $("#txtname").css("width", textsize);

        $("#message").html("Currently textbox Size is " + textsize + "px.");

    }

</script>

<h2>

    Dynamically change TextBox Size</h2>

<br />

Type TextBox Width: <input type="text" id="txtwidth" />px&nbsp;

<input type="button" value="Change Size" onclick="javascript: IncreaseTextboxSize();" /><br />

<br />

<br />

@Html.TextBox("TextBoxName", "", new { @id = "txtname" })

<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:

<script type="text/javascript">

    function IncreaseTextboxSize() {

        var textsize = $('#txtwidth').val();

        $("#txtname").css("width", textsize);

        $("#message").html("Currently textbox Size is " + textsize + "px.");

    }

</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

COMMENT USING

Trending up