Set focus on div contenteditable element

问题:

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.

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

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

回答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:

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.S. just ordinary space doesn't work for me

回答3:

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.

回答4:

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

editor.selectElement(editorDOMNode);

1. editor is an instance of MediumEditor.
2. editorDOMNode is a reference to the actual contenteditable DOM node.

3. 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.

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.

回答7:

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

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:

var focused = $('.focused');