把重点放在div contenteditable元素上

我有一个<div contenteditable=true> ，我通过所见即所得的方式定义了一些元素。 例如<p> ， <h1>等。我想直接把重点放在这个元素之一上。

例如在<p id="p_test"> 。 但似乎focus()函数不能用于<div>元素， <p>元素…

有没有另一种方法来定义我的情况下的重点？

Answer 1

我注意到，jQuery焦点（）不适用于宽度和高度为0的contenteditable DIV。我用.get（0）.focus（） – 原生javascript焦点方法replace了它。

Answer 2

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

 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只是普通的空间不适合我

Answer 3

旧post，但没有解决scheme为我工作。 我终于明白了：

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

Answer 4

如果使用pipe理可contenteditable元素的MediumEditor的人在这个问题上遇到困难 ，那么下面这个工作对我来说是有效的：

 editor.selectElement(editorDOMNode); 

1. editor是MediumEditor一个实例。
2. editorDOMNode是对实际contenteditable DOM节点的引用。

3. 编辑器中的特定子节点也可以如下所示：

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

Answer 5

你可以尝试这个代码，它可以自动对焦你最后的插入位置。

 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) 

Answer 6

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

您可以通过添加样式（如彩色边框或内部阴影框）来向用户标识哪个元素具有焦点。 然后，当你想访问你的jQuery脚本中的焦点元素，只要做这样的事情：

var focused = $('.focused');