我想在模态出现时自动选择模态输入字段，这样我就可以直接输入它而无需将光标放在该字段中

Question

我想不通的是如何让 add.onclick 也自动选择输入字段，这样我就可以使用键盘直接访问它，而无需将光标移动到输入字段

const add = document.querySelector("#add");
const overlay = document.querySelector(".overlay");
const input = document.querySelector(".modal .body input");

add.onclick = () => { 
    document.querySelector(add.dataset.target).classList.add("active");
    overlay.classList.add("activeLay");
    //?????
};


        <body>
            <div class="overlay"></div>
            <div class="modal" id= "inputData">
                <div class="header">
                    <h2>Add Task</h2>
                    <button class= "close">&times</button>
                </div>
                <div class="body">
                     <input type="text">
                     <button type="submit" id= "plus">Add Task</button>
                </div>
            </div>
            <div class="continer">
                <div class="todo task" id= "Taskes">
                    <h2>Tasks</h2>
                    <button type= "submit" id= "add" data-target= "#inputData">+ Add Task</button>
                </div>
           </div>
        </body>

Answer 1

element.focus() 设置 element 无需单击或 Tab 即可被选中。 Reference here

单击 add 按钮后，javascript 通过 element.focus() 将焦点设置在 input 标签上。

const add = document.querySelector("#add");
const overlay = document.querySelector(".overlay");
const input = document.querySelector(".modal .body input");

add.onclick = () => { 
    document.querySelector(add.dataset.target).classList.add("active");
    overlay.classList.add("activeLay");
    input.focus();
};

<body>
            <div class="overlay"></div>
            <div class="modal" id= "inputData">
                <div class="header">
                    <h2>Add Task</h2>
                    <button class= "close">&times</button>
                </div>
                <div class="body">
                     <input type="text">
                     <button type="submit" id= "plus">Add Task</button>
                </div>
            </div>
            <div class="continer">
                <div class="todo task" id= "Taskes">
                    <h2>Tasks</h2>
                    <button type= "submit" id= "add" data-target= "#inputData">+ Add Task</button>
                </div>
           </div>
        </body>

我想在模态出现时自动选择模态输入字段，这样我就可以直接输入它而无需将光标放在该字段中

I want to make the modal input filed automatically selected when the modal is appear so i can type in it directly without put the cursor in the filed

javascript

select

auto