Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jquery expand textbox on focus using asp.net

Aug 19, 2012
Introduction

Here I will explain how to expand or increase textbox size on focus using JQuery in asp.net.

Description:
  
In previous article I explained disable right click on image using JQuery and many articles relating to JQuery. Now I will explain how to expand or increase textbox size on focus using JQuery in asp.net.

To implement this one we need to write code as shown below in your aspx page


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery expand textbox on focus using asp.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#txtUserName').width(150);
$('#txtUserName').focus(function() {
$(this).animate({
width: 250,
height:20
})
.delay(100)
});
$('#txtUserName').blur(function() {
$(this).animate({
width: 150,
height:15
})
.delay(100)
});
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div><b>Search:</b>
<asp:TextBox ID="txtUserName" runat="server" />
</div>
</form>
</body>
</html>
If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery and in header script we have focus and blur events for txtUserName textbox which is used to animate the texbox to increase or decrease size based on onfocus and onblur. 

Demo

To test this sample check below textbox


Search:


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

2 comments :

Unknown said...

nice post...:)

Anonymous said...

Hi Suresh,

Nice post, working fine.. I need your help, How can use this on grid view item templates?

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.