焦点内容可编辑 div

Posted 2023-03-05

【中文标题】焦点内容可编辑 div

【英文标题】：Focus ContentEditable 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> 的可能重复项

***.com/a/14701053/2025923 可能重复

Set focus on div contenteditable element 的可能副本

【参考方案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 在您的脚本中的表示方式。