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

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 >
            <h4  style="text-align: center;">Enter the number</h4>
            ...

        <!-- Modal body -->
        <div >
            <div  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.

CodePudding user response：

You need to add autofocus to the input

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

CodePudding user response：

autofocus attribute won't work with hidden elements (display:none) like bootstrap modals, so the solution is tricky.

this can be done using setInterval to focus on the element once it appear in the screen , then clearInterval when the element have the actual focus (you can use document.activeElement to know what element has focus).

here is a full example (JSFiddle) :

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <script>
        // call this function when the user click show modal button
        function showModal() {
            // clear this interval when the element get the focus using onfocus attribute
            window.modalFocusInterval = setInterval(function () {
                var el = document.getElementById('phoneNumber');
                if (document.activeElement != el) {
                    el.focus();
                }
            }, 50);
        }
    </script>
</head>

<body>

    <div >
        <h2>Modal Example</h2>
        <!-- Trigger the modal with a button -->
        <button type="button"  data-toggle="modal" data-target="#myModal" onclick="showModal()">Open Modal</button>

        <!-- Modal -->
        <div  id="myModal" role="dialog">
            <div >

                <!-- Modal content-->
                <div >
                    <div >
                        <button type="button"  data-dismiss="modal">&times;</button>
                        <h4 >Modal Header</h4>
                    </div>
                    <div >
                        <div  role="group" aria-label="Basic example">
                            <input id="phoneNumber" type="tel" onfocus="clearInterval(window.modalFocusInterval)" autofocus></input>
                        </div>

                    </div>
                    <div >
                        <button type="button"  data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>

    </div>

</body>

</html>

don't forget to clearInterval using onfocus attribute.