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>