聚焦ContentEditable div

Question

我希望能够让contenteditable div获得焦点，这样当它被插入到DOM中时，我就可以自动开始输入了。

我已经尝试过$('.content').focus()，但是它没有起作用。

示例html：

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

- Tarlen

---

可能是在contentEditable <div>上设置光标位置的重复问题。 - marsh

可能重复问题：https://dev59.com/nXE95IYBdhLWcg3wQ7qc#14701053 - Tushar

可能是设置焦点在div contenteditable元素上的重复问题。 - WiredPrairie

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，只有最后一个将获得焦点。请参见示例。 - 你不需要在每个单独的代码块中包装 window.load。 通常，你可以将整个 JavaScript 代码都包装在 window.load 中。也许有一些例外，阅读此文章和此文章以充分理解 window.load 机制的工作原理，这样你就可以确切地知道如何使用它。（请注意，第二个链接中的 .load 也可以用于其他元素。）

- myfunkyside

---

但是我会根据某些用户事件（如单击和按下特定键）动态地插入contenteditable div。这意味着当页面完成初始加载时，该div不在DOM中。 - Tarlen

当它被插入到DOM中时自动开始输入。 - Tarlen

它正在将焦点带到第0个索引。是否可能将焦点带回到离开的位置？ - Vikas Bansal

@VikasBansal，您能详细说明您的确切情况吗？（一般来说，听起来您需要存储某种对焦点元素的引用，以便您可以将焦点放回该元素。但是，如果不知道您的确切情况，很难给出更多建议。） - myfunkyside

@VikasBansal 对于让你等这么久我很抱歉。现在我明白你的意思了，我不久前也遇到过这个问题。最终我使用了一个叫做jQuery Caret的jQuery插件。它是一个非常小的插件，使用起来非常简单。如果你不想使用jQuery，甚至可以尝试使用插件的源代码，它并不多。希望能帮到你。 - myfunkyside