Speed up development with full-stack environments for every branch.

Learn More

Setting focus to an input field using jQuery [form]

Forked from How to use the jQuery UI Slider.

8988 Runs 78179 Views 17428 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>Setting focus to an input field using jQuery</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
            font-size: 18px;
        }
   
        .input{
            padding: 3px;
        }

        #form{
            width:300px;
            margin:0 auto;
            text-align: left;
        }
        
    </style>


</head>
<body>

    <form method="post" id="form">
        <label>Set focus on page load</label></br>
        <input type="text" name="input1st" />
        <br />
        <br />
        <label>2nd input</label><br />
        <input type="text" name="input2nd" />
        <br />
        <br />
        <input type="button" value="Set focus to 2nd input" /><input type="Submit" />        
    </form>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        //When DOM loaded we attach click event to button and set focus
        $(document).ready(function() {
            
            //set focus to 1st input field
            $("#form [name='input1st']").focus();
            
            //attach click event to button
            $("#form [type='button']").click(function(){
                $("#form [name='input2nd']").focus();
            });
            

        });

    </script>

</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).