How to get a form field to immediately become active when the page loads?

Viewed 25

I have a simple form with one input. How do I get that input form field to immediately highlight for text entry after the page loads?

<!-- Modal Header -->
        <div class="modal-header">
            <h4 class="modal-title" style="text-align: center;">Enter the number</h4>
            ...

        <!-- Modal body -->
        <div class="modal-body mx-auto">
            <div class="btn-group-vertical  my-5" role="group" aria-label="Basic example">
                <input id="phoneNumber" type="tel"></input>

For context: It's a modal that allows the user to call a telephone number from the web page. Currently, you have to click the input field to start typing the number. I want the user to be able to just start typing the number out on page load and have the number fill out in the form field.

Snippet of code above simply shows the key parts of the form for reference. Please let me know if more code is required.

1 Answers

You need to add autofocus to the input

    <input id="phoneNumber" type="tel" autofocus>
Related