焦点内容可编辑 div答案

【问题标题】：Focus ContentEditable div焦点内容可编辑 div
【发布时间】：2015-07-21 01:26:50
【问题描述】：

我想聚焦 contenteditable div，以便在插入 DOM 时自动开始输入

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

示例 html：

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

【问题讨论】：

Set cursor position on contentEditable <div> 的可能重复项
stackoverflow.com/a/14701053/2025923 可能重复
Set focus on div contenteditable element 的可能副本

标签： javascript jquery html reactjs

【解决方案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>

（小提琴：http://jsfiddle.net/hxeqm541/）

它的作用是等待页面完全加载，然后再执行window.load中的代码。
如果不这样做，关注div 的代码将在div 甚至在页面上存在之前执行，这是不可能的。当div 最终出现在页面上时，代码已经运行，所以不会再发生任何事情了。

旁注：

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

【讨论】：

但是我动态插入 contenteditabke div 以响应某些用户事件，例如单击并按下特定键。这意味着当页面完成初始加载时 div 不存在于 DOM 中
那你为什么不在你的问题中指定呢？如果你描述一个普遍的问题，你就会得到一个普遍的解决方案。如果您在特定问题上需要帮助，我们将需要详细信息...
"插入DOM时自动开始输入"
这是开放的解释.. 现在我知道它是动态插入的，我倾向于这样阅读它，在我知道之前，我不是。（我把“动态”放在大写字母上，以防你还不明白那本来是让每个人都明白的关键词。是的，那是讽刺的。我不是要破坏你的蛋蛋，我想说明一点：当你要求人们把空闲时间花在解决你的问题上时，你最好确保你尽可能清楚地向他们解释，这样就不会有误解的机会（意思是浪费时间）。
直接在那个模棱两可的句子下，您唯一提供的内容可编辑 div 的代码是 HTML 代码 (<div class="content" contenteditable="true">sample input</div>)。不是向我们展示如何动态插入 div 的 JS 代码，没有函数，也不是一行 js 代码。只有加载就绪的 HTML，我敢打赌，这里的几乎每个人都认为这就是该 div 在您的脚本中的表示方式。