Saturday, 29 December 2012 13:56

how to make textbox wider when in focus using jquery

Written by 
Rate this item
(0 votes)

you may have seen input textbox becomes wider
dynamically in some websites when mouse cursor is
placed on it(in focus) to take some user input.It's
attractive to see and in this way it makes spaces
for larger input.

the following codes shows how to do that using
jquery in asp.net pages.you may use
if in php pages too.it's nice and appealing -

<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript"
src="/Script/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#input").focus(function(){
$("#input").animate({width:"200px"});
});
$("#input").blur(function(){
$("#input").css("width","50px");
});

});
</script>
<style type="text/css">
.textstyle
{
width:50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="s1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="u1" runat="server">
<ContentTemplate>

<div id="test" style="margin-top:20px;">
Enter your name: <br />
<%--<input type="text" id="input"
style="width:50px;" />--%>
<asp:TextBox ID="input" CssClass="textstyle"
runat="server" /></div>

</ContentTemplate>
</asp:UpdatePanel></form></body></html>

happy jquery programming

Read 1605 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments