Default Text For Textboxes using JQuery

Many a times you would have seen in web that there is some default text in text boxes to help user to suggest that they have to enter something in the textbox, and as soon as the user clicks on text box that default text disappears. We will achieve the same in this article.

Step 1. Add the following markup in your aspx page.

<form id="form1" runat="server">

        <p></p>

        <div align="center">

            <fieldset style="width:400px;height:80px;">

                <p>

                    <asp:TextBox ID="txtSearch" width="200px" CssClass="defaultText" ToolTip="Enter your search keyword here" runat="server"></asp:TextBox>

                    <asp:Button ID="btnSubmit" Text="SEARCH" runat="server"/>

                </p>

            </fieldset>

        </div>

 </form>

 Step 2. Add the following style tab to your aspx page.

<style type="text/css">

        .defaultText

        {

            font-style:italic;

            color:#CCCCCC;

        }

 </style>

 Step 3. Finally add the following script to your page. The Script is self explanatory.

<script type="text/javascript" language="javascript">

        $(document).ready(function() {

            //Step 1. In the document.ready() function, retrieve the TextBox

            //control using its ClientID

            //and save in a local variable:

            var searchBox = $('#<%=txtSearch.ClientID%>');

            //Step 2. On the focus event, check if it contains the default

            //text:

            searchBox.focus(function() {

                //The ToolTip property of the ASP.NET TextBox control is

                  rendered

                //as title at runtime. Thus, the ToolTip text Enter your

                //search keyword here is retrieved using this.title.

                if (searchBox.val() == this.title) {

                    //Step 3. If yes, then remove the defaultText css style:

                    searchBox.removeClass("defaultText");

                    //Also clear the search field:

                    searchBox.val("");

                }

            }); //searchBox.focus() function ends here...

            //Step 3. On the blur event, check if the TextBox is empty:

            searchBox.blur(function() {

                if (searchBox.val() == "") {

                    //if yes then attach the defaultText css class

                    searchBox.addClass("defaultText");

                    //Add the default information text to the search field:

                    searchBox.val(this.title);

                }

            }); //searchBox.blur() function ends here...

            //Step 4. Call the blur event on page load so that the TextBox is

            //initially out of focus:

            searchBox.blur();

           

        });

    </script>

run it.

 

Note : 

ClientID is a unique server control identifier generated by ASP.NET to avoid duplicate IDs when controls are repeated; say, for example, in a Repeater control. It is generated by concatenating the ID of the control with the UniqueID of its parent control. Underscore character (_) is used to separate each part of the generated ID.

See more in future installment...