将焦点放在div contenteditable元素上

我有一个<div contenteditable=true>由所见即所得定义一些元素的地方。例如<p>，<h1>等等。我想直接将重点放在其中一个元素上。

例如在<p id="p_test">。但是似乎focus()函数对<div>元素，<p>元素不起作用...

在我的情况下，还有另一种方法来定义焦点吗？

旧帖子，但没有解决方案对我有用。我最终弄清楚了：

var div = document.getElementById('contenteditablediv');
setTimeout(function() {
    div.focus();
}, 0);

在现代浏览器中，您可以使用：

var p = document.getElementById('contentEditableElementId'),
    s = window.getSelection(),
    r = document.createRange();
r.setStart(p, 0);
r.setEnd(p, 0);
s.removeAllRanges();
s.addRange(r);

但是，如果您的元素为空，那么我会遇到一些奇怪的问题，因此对于空元素，您可以这样做：

var p = document.getElementById('contentEditableElementId'),
    s = window.getSelection(),
    r = document.createRange();
p.innerHTML = '\u00a0';
r.selectNodeContents(p);
s.removeAllRanges();
s.addRange(r);
document.execCommand('delete', false, null);

删除nbsp后，光标停留在p元素内

PS只是普通空间对我不起作用

我注意到jQuery focus（）不适用于宽度和高度为0的内容可编辑DIV。我将其替换为.get（0）.focus（）（本机javascript焦点方法），并且可以正常工作。

很多时候，如果您无法调用.focus()某个元素，这是因为tabIndex为-1，这意味着当您按下Tab键进行导航时，Tab键无法将焦点放在该元素上。

将tabIndex更改为> = 0将使您专注于元素。如果您需要动态地执行此操作，则只需在事件侦听器中向您的元素添加一个tabindex> = 0。

您可以尝试使用此代码，它可以自动将焦点放在您的上一个插入位置。

let p = document.getElementById('contenteditablediv')
let s = window.getSelection()
let r = document.createRange()
r.setStart(p, p.childElementCount)
r.setEnd(p, p.childElementCount)
s.removeAllRanges()
s.addRange(r)

如果有人使用管理元素的MediumEditor偶然发现contenteditable此问题，则以下对我有用：

editor.selectElement(editorDOMNode);

1. editor是的实例MediumEditor。
2. editorDOMNode是对实际contenteditableDOM节点的引用。

3. 还可以集中注意编辑器中的特定子节点，如下所示：

   editor.selectElement(editorDOMNode.childNodes[0]);
   

在@Surmon答案上进一步构建。如果您希望在文本中的最后一个字母/数字之后而不是最后一个插入位置之后自动聚焦（如果子节点包含在块类型标记中而不是纯文本中，则最后一个插入位置会将光标移动到新行）然后应用此小修改：

r.setStart(p.lastChild, 1);
r.setEnd(p.lastChild, 1);

这是一个扩展功能，用于检查编辑器/元素是否具有任何子节点，并根据情况在末尾相应地设置光标：

let p = document.getElementById('contenteditablediv');
p.focus();  // alternatively use setTimeout(() => { p.focus(); }, 0);
// this is enough to focus an empty element (at least in Chrome)

if (p.hasChildNodes()) {  // if the element is not empty
  let s = window.getSelection();
  let r = document.createRange();
  let e = p.childElementCount > 0 ? p.lastChild : p;  
  r.setStart(e, 1); 
  r.setEnd(e, 1);    
  s.removeAllRanges();
  s.addRange(r);
} 

需要检查的另一件事：如果打开了浏览器的控制台窗口，请确保在加载页面时控制台没有焦点，否则页面上的元素将无法获得预期的焦点。

这似乎也暗示您不能document.querySelector('#your-elem').focus()在控制台中运行（2020年8月在Mac上尝试使用Chrome，Safari和Firefox）。

将“ click”事件处理程序绑定到contenteditable div中的所有元素，并在单击时更改类/样式（即，将“ focused”类添加到元素）；

您可以通过添加样式（例如彩色边框或内部方框阴影）来向用户标识哪个元素具有焦点。然后，当您想访问jQuery脚本中的焦点元素时，只需执行以下操作：

var focused = $('.focused');