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() set element 无需单击或标签即可被选中。 Reference here

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

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>

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

1 个答案: