Установите позицию каретки в contenteditable div слое в Chrome / webkit

Question

Я пытаюсь установить позицию каретки в contenteditable div-слое, и после небольшого поиска в Интернете и экспериментов я заставил его работать в Firefox, используя это:

function set(element,position){
    element.focus();
    var range= window.getSelection().getRangeAt(0);
    range.setStart(element.firstChild,position);
    range.setEnd(element.firstChild,position);
}

[...]

set(document.getElementById("test"),3);

Но в Chrome / webkit он выделяет весь контент в div. Это ошибка в webkit или я делаю что-то не так?
Заранее спасибо.

Answer 1

Смещение границы Range в узле является только символьным, если узел является текстовым узлом. Если узел является элементом, смещение - это число дочерних узлов до границы.

Например, если у вас есть HTML

<div id="myDiv">One <b>two</b> three</div>

... и вы создаете диапазон следующим образом:

var range = document.createRange();
var myDiv = document.getElementById("myDiv");
range.setStart(myDiv, 1);
range.setEnd(myDiv, 1);

... вы получите Range, который начинается и заканчивается сразу после первого дочернего элемента div, который является текстовым узлом:

<div id="myDiv">One |<b>two</b> three</div>