Javascript无法在Chrome上将焦点集中到DIV元素

Question

你好，我希望在页面加载后立即聚焦于div。在Firefox上它工作得很好，但在chrome上不起作用。这是我的代码：

https://jsfiddle.net/9yb2boxn/

document.getElementById("focusme").focus();

#focusme {width:400px; height:100px; overflow-y:scroll; }

<div id="focusme">
  focus me focus me focus me focus me  focus me focus me focus me focus me  focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me
</div>

当我在Firefox中运行此代码并按下键盘上的向下箭头时，div会向下滚动，但在Chrome中不会。为什么会出现这个问题？

我已经尝试过

setTimeout(function() {

   document.getElementById("focusme").focus();

}, 1); 

仍然无法工作。

请求帮助。谢谢。

- Ching Ching

---

可能是重复的问题：是否可以使用Javascript的focus()函数集中于<div>？。 - Michał Perłakowski

Answer 1

如果你想让一个不可聚焦的元素变得可聚焦，你必须给它添加一个tabindex属性：

<div id="focusme" tabindex="1"></div>

另外，您可以使用ID和位置哈希来访问它。 请查看这里的问题答案： 使用JavaScript focus()函数聚焦于<div>是否可行？

- Sebastien Daniel

---

太棒了！这个完美地运行了！非常感谢你，Sebastian先生！你是真正的MVP！ - Ching Ching

Answer 2

如果你想通过 JavaScript 设置焦点到 div 元素上，可以使用以下代码：

$("#focusme").attr("tabindex",-1).focus();

希望这能对您有所帮助。

 $("#focusme").attr("tabindex",-1).focus();

#focusme {width:400px; height:100px; overflow-y:scroll; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="focusme">
  focus me focus me focus me focus me  focus me focus me focus me focus me  focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me
</div>

- Nitin Garg

---

谢谢Nitin，你的方法也有效！真的非常感谢你！你是个好人！ - Ching Ching

被踩了。为了如此基础的事情而要求jquery是过度的。 - Sebastien Daniel

正如我所提到的，如果需要在运行时将焦点集中到div上。如果已经使用了jQuery，那么这是否仍然过度使用？ - Nitin Garg