Установите позицию каретки в определенной позиции в контентном div

СМОТРЕТЬ ПЕРЕД МАРКИРОВКОЙ DUPLICATE/DOWNVOTING

  • Допустимый контент div будет не иметь дочерних элементов
  • Я не хочу устанавливать позицию в конце div
  • я не требуется кросс-браузерное решение, требуется только поддержка Chrome
  • Только vanilla JS, нет библиотек.

Я видел много решений. Многие Тим Даун и другие. Но никто не работает. Я видел window.getSelection, .addRange и т.д., Но не вижу, как они применяются здесь.

Здесь jsfiddle.

(испробован) Код:

var node = document.querySelector("div");
node.focus();
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(node, caret);
range.setEnd(node, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

ОТВЕТЫ

Ответ 1

Вам нужно поместить каретку внутри текста node внутри вашего элемента, а не самого элемента. Предполагая, что ваш HTML выглядит примерно как <div contenteditable="true">Some text</div>, использование свойства firstChild элемента получит текст node.

Обновлен jsFiddle:

http://jsfiddle.net/xgz6L/8/

код:

var node = document.querySelector("div");
node.focus();
var textNode = node.firstChild;
var caret = 10; // insert caret after the 10th character say
var range = document.createRange();
range.setStart(textNode, caret);
range.setEnd(textNode, caret);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);