Input field to accept text automatically without having to click on it in HTML

18 viewscsshtmlinputjavascript
0

I am using a popup container in HTML, that contains one label (input) option for text, and a few buttons. I want the user to be able to start typing into the input field when the popup opens (which is triggered by a keybaord shortcut I am using), not necessarily having to click on it. how can i do so?

This is my HTML code snippet of the Popup menu:

   <div id="popupContainer">
        <div id="popupContent">
            <label for="AnnotateLabel">Label:
            <input type="text" id="AnnotateLabel" autocomplete="off" required>
            </label><br>    
            <button id="saveButton">Save</button>
            <button id="deleteButton">Delete</button><br><br>
            <!--<button id="closeButton">Close</button><br>-->
            <label for="loopRegion">Loop Region:
            <input type="checkbox" id="loopRegion" checked> </label><br>
            <!--<button id="playPopup">Play</button>-->
            <span>Playback Rate: </span>
            <button class="play-quarterx" data-action="play-quarterx">0.25x</button>
            <button class="play-halfx" data-action="play-halfx">0.5x</button>
            <button class="play-1x" data-action="play-1x">1.0x</button>
            
        </div>
    </div>