I have a <div contenteditable=true> where I define by a WYSIWYG some elements. For example <p>,<h1>, etc. I would like to put directly the focus on one of this elements.

我有一个

，我在WYSIWYG中定义了一些元素。例如

，

等。我想直接关注其中一个元素。

For example on <p id="p_test">. But it seems that focus() function doesn't work on <div> elements, <p> elements...

例如，在

上。但似乎focus（）函数不适用于

元素，

元素......

Is there a another means to define the focus in my case?

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

7 个解决方案

#1

Old post but none of the solutions worked for me. I figured it out eventually though:

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

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

#2

I noticed that jQuery focus() did not work for my contenteditable DIV with width and height of 0. I replaced it with .get(0).focus() - the native javascript focus method - and it works.

我注意到jQuery focus（）不适用于宽度和高度为0的我唯一的DIV。我用.get（0）.focus（） - 原生的javascript焦点方法替换它 - 它的工作原理。

#3

In modern browsers you can use:

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

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

But if your element is empty I got some strange problems so for empty elements you can do this:

但是如果你的元素是空的我有一些奇怪的问题，所以对于空元素，你可以这样做：

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

After deleting nbsp cursor stays inside p element

删除游标后停留在p元素内

P.S. just ordinary space doesn't work for me

附：只是普通的空间对我不起作用

#4

In case someone, who uses MediumEditor that manages contenteditable element, stumbles upon this issue, the following has worked for me:

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

editor.selectElement(editorDOMNode);

editor is an instance of MediumEditor.
编辑器是MediumEditor的一个实例。
editorDOMNode is a reference to the actual contenteditable DOM node.
editorDOMNode是对实际可信DOM节点的引用。
It is also possible to focus on a specific child node within the editor as follows:

也可以将注意力集中在编辑器中的特定子节点上，如下所示：
```
editor.selectElement(editorDOMNode.childNodes[0]);
```

#5

You can try this code, it can auto focus in your last insert location.

您可以尝试此代码，它可以自动聚焦在您的上一个插入位置。

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)

#6

A lot of the time if you can't call .focus() on an element, it's because the tabIndex is -1, which means the tab key can't focus on it when you're pressing tab to navigate.

很多时候如果你不能在一个元素上调用.focus（），那是因为tabIndex是-1，这意味着当你按Tab键进行导航时，tab键无法聚焦它。

Changing your tabIndex to >= 0 will let you focus on the elements. If you need to do it dynamically, you can just add a tabindex >= 0 to your element in the event listener.

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

#7

-6

Bind a "click" event handler to all elements within the contenteditable div, and change the class/style on click (i.e. add class "focused" to the element);

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

You can identify, to the user, which element has focus by adding style such as a colorful border or an inner box-shadow. Then when you want to access the focused element in your jQuery script, just do something like this:

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

var focused = $('.focused');

var focused = $（'。focused'）;

#1