Highlight dot net form text box onfocus using jquery





Highlight asp.net text box when it gets focus. When your cursor will focus on text box it will be surrounded by a red rectangle when cursor leaves text it becomes normal. If coursor goes to  button or dropdown list they dont get any style the behave as normal. This code is ony tested in IE7. Do not forget to reference Jquery script in your document. you can get jquery script file from jquery.com

 

CSS Style

<style type=”text/css”>

        .required

        {

            border: solid 1px #ff0000;

            padding: 1px 1px 1px 1px;

        }

</style>

ASP.net Controls

    <div>

      <asp:Label ID=”Label1″ runat=”server”>First Name</asp:Label>

            <asp:TextBox ID=”txtFirstName” unat=”server”></asp:TextBox>

            <asp:Label ID=”Label2″ runat=”server”>Last Name</asp:Label>

            <asp:TextBox ID=”txtLastName” runat=”server”></asp:TextBox>

        </div>

        <asp:Button ID=”Button1″ runat=”server” Text=”Button” />

        <asp:DropDownList ID=”DropDownList1″ runat=”server”>

        <asp:ListItem >1</asp:ListItem>

        <asp:ListItem >1</asp:ListItem>

        <asp:ListItem >1</asp:ListItem>

       

        </asp:DropDownList>

Jquery Code

$(document).ready(function () {

        $(“:text”).focus(function (){

                $(this).addClass(“required”);

            });

               $(“:text”).blur(function () {

                $(this).removeClass(“required”);

               });

            });

OR

$(document).ready(function () {

        $(“input[type=text]”).focus(function (){

                $(this).addClass(“required”);

            });

           

            $(“input[type=text]”).blur(function () {

                $(this).removeClass(“required”);

               });

  });

Following Code give error in IE 7 I haven’t tested in any other browser.  Can any one tell me please why following code is giving error though this code is available on Internet:  $(“input[@type=text]”).

$(document).ready(function () {

        $(“input[@type=text]”).focus(function (){

                $(this).addClass(“required”);

            });

           

            $(“input[@type=text]”).blur(function () {

                $(this).removeClass(“required”);

               });       

 });




Tags: , ,

Comments are closed.