DevCurry: Using jQuery to Set Focus on the first TextBox Kept inside a Panel/Div

In this post, we will use a small example to demonstrate how easy it is to use jQuery to select page elements and work on them.

When a page with a form loads, you often need to set focus on a page element kept inside the form. Here’s an example of how to set focus on the first TextBox kept inside a parent container, div.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jQuery to Set Focus on a TextBox Kept inside a Panel/Div</title>
 <style type="text/css">
    #divOne
    {
        height:300px;
        width:150px;
        top:30px;
    }
</style>
 <script src="http://code.jquery.com/jquery-latest.js"    
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#divOne :input[type='text']:first").focus();
        });
    </script> 
</head>
<body>
    <div id="divOne">
        TextBox1 <input id="textOne" type="text" /> <br />
        TextBox2 <input id="textTwo" type="text" />  <br />
        TextBox3 <input id="textThree" type="text" />  <br />
    </div>
</body>
</html>

The :input selector selects all input, textarea, select and button elements. The :first selector selects the first textbox. As you can see, we are using

$("#divOne :input[type='text']:first").focus()

to set focus on the first textbox element inside the element with ID divOne. The [type=’text’] tells the selector that we are only interested in TextBoxes.

If you run the page, the first TextBox element gets focused as expected:

Using jQuery to Set Focus on the first TextBox Kept inside a Panel/Div

No comments:

Post a Comment