javascript - 焦点 ContentEditable div

Question

我想聚焦contenteditable div，这样当它被插入到DOM中时我可以自动开始输入

我试过 $('.content').focus()，但这不起作用

示例 html:

<div class="content" contenteditable="true">sample input</div>

Answer 1

我认为您可能只需要将代码包装在 window.load 函数中:

$(window).on("load",function(){
  $('.content').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content" contenteditable="true">sample input</div>

( fiddle :http://jsfiddle.net/hxeqm541/ )

它所做的是，它会等待页面完全加载，然后再执行 window.load 中的代码。
如果不这样做，即使 div 还没有出现在页面上，聚焦到 div 的代码也会被执行，这是不可能的。当 div 最终确实存在于页面上时，代码已经运行，因此不会再发生任何事情。

---

边注:

• 因为您通过类 ($('.content')) 引用了 div，如果您有多个具有相同类名的 div , 只有最后一个会获得焦点。参见 example .
• 您不需要将每个单独的代码块包装在window.load中。
  通常，您可以将整个 JavaScript 代码包装在 window.load 中。该规则可能有一些异常(exception)情况，请阅读 this和 this充分了解 window.load 机制的工作原理，以便您确切地知道如何使用它。
  (注意在第二个链接中 .load 也可以用在其他元素上。)