js containsNode не работает с крайними элементами
Разрабатываю простенький wysiwyg-редактор. Есть html структура с текстовым содержанием "Привет это мир", хочу определить, выбрана ли вся строка целиком или только часть, для этого вызываю в цикле метод containsNode для каждого элемента, но он отказывается работать с крайними элементами. Ниже код, выделите слово "мир" целиком и нажмите на кнопку, метод containsNode всегда будет возвращать false. Как быть?
var btn = document.getElementById('btn');
btn.onclick = function() {
var select = window.getSelection();
var elem = document.getElementById('r');
alert(select.containsNode(elem));
}<i><b><u>Привет </u></b><b>это</b><b id="r"> мир</b></i>
<button id="btn">Кпопка</button>Ответы (1 шт):
Насколько я понимаю, при ручном выделении даже всего текста элемента, вы не можете гарантированно добиться того, чтобы сам элемент попал внутрь выделения. Мои эксперименты на скорую руку показывают, что при выделении всего текста элемента, anchorNode и focusNode могут равняться текстовому узлу внутри элемента, так что сам элемент может быть полностью вне выделения, хоть и всё содержимое его выделено. Наверное, вам стоит вдобавок к вашей проверке проверять, содержатся ли внутри выделения все текстовые узлы элемента (или равняется ли длина выделения (или focusOffset/anchorOffset) длине этих текстовых узлов).