Set focus on div contenteditable element

Question

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

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

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

Answer 1

Adding to Chris' answer, it's also nice to ensure the cursor is at the end of the word/sentence:

[..]
setTimeout(function() {
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(div);
  range.collapse(false); // <-- Set the cursor at the end of the selection
  selection?.removeAllRanges();
  selection?.addRange(range);
  div.focus();
}, 0);

Answer 2

Edit: I realized this question is actually asking how to programatically place the caret on a child element inside a contenteditable div (not how to place the caret on user interaction). I tried to apply solutions from the other answers, but cannot get it to work in the code widget.

---

Note that the click event handler will require a click to focus the element (without triggering the caret), and another click to trigger the caret. Methods such as setTimeout and .get(0) will not work as expected.

Using a mousedown event handler instead works as expected using just the focus() call. No need for other workarounds. Tested on Windows/Chrome (mouse) and Android/Chrome (touch).

jQuery example:

const ns = {
  focus: e => {
    let el = $(e.currentTarget);
    el.focus();
  }
}

$(document).ready(() => {
  $('body').on('mousedown', '[contenteditable]', ns.focus); //use mousedown instead of click

  let p = $('#auto_focus').get(0),
    s = window.getSelection(),
    r = document.createRange(),
    e = p.childElementCount > 0 ? p.lastChild : p;

  setTimeout(() => p.focus(), 0);

  //r.setStart(p, 0);
  //r.setEnd(p, 0);
  //r.setStart(e, 1);
  //r.setEnd(e, 1);
  r.setStart(p, p.childElementCount)
  r.setEnd(p, p.childElementCount)
  s.removeAllRanges();
  s.addRange(r);
});

[contenteditable] {
  border-bottom: 1px solid lightgray;
  /* prevents shifting on select */
  line-height: 1.2em;
}

[contenteditable]:focus {
  border-bottom: 1px solid black;
  /* prevents slight visual shifting on select */
  outline: 1px solid transparent;
}

[contenteditable=true]:empty:not(:focus):before {
  content: attr(placeholder) '...';
  font-style: italic;
  font-size: .9em;
  text-transform: lowercase;
  opacity: .3;
  font-weight: normal;
}

[contenteditable]>* {
  min-height: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable=true placeholder="edit me"></div>
<div contenteditable=true placeholder="edit me, too"></div>
<div contenteditable=true>
  <p>paragraph 1</p>
  <p id="auto_focus">paragraph 2</p>
</div>

Answer 3

To build further on @Surmon answer. If you are looking to auto focus right after your last letter/number in the text instead of the last insertion location (last insertion location will move the cursor to a new line if the child nodes are enclosed in block type tags and not plain text) then apply this small modification:

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

This is an extended function that checks if the editor/element has any child nodes and depending on the situation sets the cursor accordingly at the end:

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 4

One more thing to check: If you have the browser's console window open, make sure the console does not have focus when you load the page, or else the element on the page won't get focus as expected.

This also seems to imply that you can't run document.querySelector('#your-elem').focus() in the console (tried with Chrome, Safari and Firefox on a Mac, Aug 2020).

Answer 5

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.

Answer 6

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)

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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.

Answer 11

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