Добрый день. Есть такая разметка:
<div contenteditable="true"><span>PDF</span></div>
Так как стоит contenteditable, то можно сделать чтобы появился текстовый курсор для набора текста. Мне нужно поставить курсор до <span>-а. То есть при наборе слово должно быть слева.
Написал такой код:
let span = document.querySelector('span'),
selection = document.getSelection(),
range = new Range();
range.setStartBefore(span);
selection.addRange(range);
Метод setStartBefore должен поставить курсор до <span>-а. Но по факту он ставит внутрь <span>-а.
Если в обёрке не будет <span>-а, то текстовый курсор нормально встаёт внутрь <div>-а. Так же если есть текст, то курсор можно поставить до или после текста. А вот если есть только вложенный <span>, то курсор никак не хочет вставать ДО него.
Теоретически можно поместить внутрь еще один пустой <span> и в него будет добавляться текст, затем изъять текст, удалить <span> и поставить на его место, но это уже костыли. Может есть какой-то другой способ?