Question

我有一个<div contenteditable=true>我用WYSIWYG定义了一些元素。例如<p>，<h1>等。我想直接关注其中一个元素。

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

在我的案例中是否有另一种方法来定义焦点？

Answer 1

旧帖子，但没有一个解决方案适合我。我最终想通了：

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

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);

删除游标后停留在p元素

中

P.S。只是普通的空间对我不起作用

Answer 3

我注意到jQuery focus（）对宽度和高度为0的我唯一的DIV不起作用。我将它替换为.get（0）.focus（） - 本机javascript焦点方法 - 它可以工作。

Answer 4

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

editor.selectElement(editorDOMNode);

editor是MediumEditor。
editorDOMNode是对实际contenteditable DOM节点的引用。
还可以按如下方式关注编辑器中的特定子节点：
```
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

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

这似乎还意味着您无法在控制台中运行document.querySelector('#your-elem').focus()（2020年8月在Mac上与Chrome，Safari和Firefox进行了尝试）。

Answer 7

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

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

Answer 8

以@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);
}

Answer 9

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

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

var focused = $('.focused');

将重点放在div contenteditable元素上

9 个答案: