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

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 3

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

Answer 4

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

editor.selectElement(editorDOMNode);

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

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

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

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

Answer 6

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

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

Answer 7

Свяжите обработчик события «click» со всеми элементами внутри contenteditable div и измените класс / стиль при нажатии (т.е. добавьте класс «focus» к элементу);

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

var focused = $('.focused');