将元素添加到 DOM 时如何立即聚焦答案

【问题标题】：How to immediately focus an element when it is added to the DOM将元素添加到 DOM 时如何立即聚焦
【发布时间】：2017-02-03 14:26:39
【问题描述】：

我有一个下拉列表，它会在单击按钮时显示。在单击按钮之前，此下拉列表在 DOM 中不可用。将此下拉列表的第一个列表项添加到 DOM 后如何获得焦点。

谢谢。

【问题讨论】：

element.focus()?
下拉列表被添加到 DOM 的末尾，并且绝对位于被点击的按钮下方。
@qxz element.focus() 不起作用:(
您是否引用了要聚焦的元素？（你能告诉我们你正在使用的代码吗？阅读How to ask。）
@GünterZöchbauer 这真的很有帮助。

标签： javascript angular

【解决方案1】：

例如：如果您的下拉元素 id 是“selectstate”，那么您可以使用 getElementById

   <select id="state" name="state">
<option value="AB">AB</option>
<option value="AC">AC</option>
</select>


window.onload = function() {

    document.getElementById("state").focus();
};

【讨论】：

【解决方案2】：

下面的 sn-p 将帮助您在 DOM 上创建一个下拉按钮，然后将其聚焦。当然，你必须改进它。

createDropdown = function(optsArray) {
  let dd = document.createElement("select");
  dd.setAttribute("id", "foo");
  for(var i =0; i<optsArray.length; i++) {
    let opt = document.createElement("option");
    opt.setAttribute("value", i);
    let optText = document.createTextNode(optsArray[i]);
    opt.appendChild(optText);
    dd.appendChild(opt);
}
  let cnt = document.getElementById("dropdown-container");
  cnt.innerHTML="";
  cnt.appendChild(dd);
  dd.focus();
} 

document.querySelector("button").addEventListener("click", function() {
  let opts = ["Marx", "Engels", "Lenin", "Gramsci", "Althusser", "Zizek"];
  createDropdown(opts);
})

#dropdown-container{
margin-top: 700px;
}

<button>Click me to load dropdown and focus it</button>

<div id="dropdown-container"></div>

【讨论】：