Установить фокус на элемент div contenteditable

Старый пост, но ни одно из решений не сработало для меня. Я понял это в конце концов, хотя:

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

В современных браузерах вы можете использовать:

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

P.S. просто обычное пространство мне не подходит

Я заметил, что jQuery focus() не работает для моего contenteditable DIV с шириной и высотой 0. Я заменил его на .get(0).focus() - собственный метод фокуса javascript - и он работает.

В большинстве случаев, если вы не можете вызвать .focus() для элемента, это происходит потому, что tabIndex равен -1, что означает, что клавиша табуляции не может сфокусироваться на нем, когда вы нажимаете табуляцию для навигации.

Изменение tabIndex на >= 0 позволит вам сосредоточиться на элементах. Если вам нужно сделать это динамически, вы можете просто добавить tabindex >= 0 к вашему элементу в прослушивателе событий.

Вы можете попробовать этот код, он может автоматически фокусироваться на последнем месте вставки.

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)

Чтобы продолжить ответ @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);
} 

Если кто-то, кто использует MediumEditor, который управляет элементом contenteditable, наткнется на эту проблему, следующее сработало для меня:

editor.selectElement(editorDOMNode);

1. editor является экземпляром MediumEditor.
2. editorDOMNode — это ссылка на фактический узел contenteditable DOM.

3. Также можно сфокусироваться на конкретном дочернем узле в редакторе следующим образом:

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

Еще одна вещь, которую нужно проверить: если у вас открыто окно консоли браузера, убедитесь, что консоль не имеет фокуса при загрузке страницы, иначе элемент на странице не получит фокус, как ожидалось.

Это также означает, что вы не можете запустить document.querySelector('#your-elem').focus() в консоли (пробовали с Chrome, Safari и Firefox на Mac, август 2020 г.).

Привяжите обработчик события "щелчок" ко всем элементам внутри div, доступного для редактирования, и измените класс/стиль при щелчке (т.е. добавьте класс "сфокусированный" к элементу);

Вы можете определить для пользователя, какой элемент находится в фокусе, добавив стиль, такой как цветная рамка или внутренняя тень блока. Затем, когда вы хотите получить доступ к сфокусированному элементу в вашем скрипте jQuery, просто сделайте что-то вроде этого:

var focused = $('.focused');