Настроить фокус на элемент, удовлетворяющий div

У меня есть <div contenteditable=true>, где я определяю WYSIWYG некоторые элементы. Например <p>, <h1> и т.д. Я хотел бы прямо сосредоточиться на одном из этих элементов.

Например, на <p id="p_test">. Но кажется, что функция focus() не работает с элементами <div>, <p> элементами...

Есть ли другое средство для определения фокуса в моем случае?

Ответ 1

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

Ответ 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);

После удаления курсора nbsp внутри элемента p

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

Ответ 3

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

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

Ответ 4

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

editor.selectElement(editorDOMNode);

editor - это экземпляр MediumEditor.
editorDOMNode является ссылкой на фактический contenteditable DOM node.
Также можно сконцентрироваться на конкретном дочернем элементе node в редакторе следующим образом:
```
editor.selectElement(editorDOMNode.childNodes[0]);
```

Ответ 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)

Ответ 6

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

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

var focused = $('.focused');