How to automatically set the focus to a textbox when a web page loads using jQuery

admin | Posted on May 10, 2021 |

This post will teach you how to automatically put cursor in form field using jQuery. So when you go to log into a website and the username field doesn’t automatically have the cursor in it when the page loads, you get a little frustrated.

HTML Code

<input type="text" id="username" name="username" />
<input type="text" id="password" name="password" />

jQuery Code

<script type="text/javascript">
    $('document').ready(function(){
        $("#username").focus();
    });
</script>

Complete page source here.

<!DOCTYPE html>
<html>
    <head>
        <title>Demo</title>
        <script src="https://scripts.guru/download/select2/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" id="username" name="username" />
        <input type="text" id="password" name="password" />
    </body>
    <script type="text/javascript">
        $('document').ready(function(){
            $("#username").focus();
        });
    </script>
</html>

Leave a Reply Cancel reply