Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Определить границы выделенного (https://javascript.ru/forum/events/5171-opredelit-granicy-vydelennogo.html)

getme 22.09.2009 18:06

Определить границы выделенного
 
Я работаю с range объектом, вопрос такой
как мне взять в рамку то что выделено?

Лучше покажу на картинке (сорри, рисую плохо; мне надо нарисовать красную рамку над выделенном)

Я вот никак понять немогу с чего начать, нужно работать с previousSibling, nextSibling, parentNode или с чем?

Выделенная область у меня есть

this.getUserSelection		= function() {
		var userSelection;
		if (window.getSelection) {
			userSelection = window.getSelection();
		} else if (document.selection) { // Opera!
			userSelection = document.selection.createRange();
		} else if ( document.getSelection() ) { // khtml
			userSelection = document.getSelection();
		}
		
		var selectedText = userSelection;
		// Handle IE
		if (userSelection.text) {
			selectedText = userSelection.text;
		}
		
		return selectedText;
	};


далее получаем range объект

this.getRangeObject  = function(selectionObject) {
		
	 if ( selectionObject.getRangeAt )
	  return selectionObject.getRangeAt(0);
	 else if ( document.selection ) { // IE
	  return document.selection.createRange();
	 } else { // Safari!
	  var range = document.createRange();
	  range.setStart(selectionObject.anchorNode, selectionObject.anchorOffset);
	  range.setEnd(selectionObject.focusNode, selectionObject.focusOffset);
	  return range;
	 }
	};

Octane 22.09.2009 22:32

Range, TextRange и Selection

getme 23.09.2009 18:43

спасибо, прочел еще раз
но я все же не пойму, как мне реализовать то что я показал на картинке

я понимаю только что мне нужно взять два нода, получить их координаты, высоту\ширину
мне не понятно какие ноды надо брать что бы это реализовать?
общий root container не подходит т.к он может захватить весь документю

Octane 23.09.2009 18:51

startContainer и endContainer для W3C-браузеров, в IE объект TextRange имеет метод getBoundingClientRect.

getme 23.09.2009 19:06

ок, судя из названия метода - getBoundingClientRect
звучит именно как то что мне нужно, попробую
что касается W3
теоретически если я возьму лев.верх координату startContainer и прав.нижн. координату endContainer то будет имеено то что нудно

а как быть когда выделение не на одной строке? (посмотри на картинку
выдление начинается с "ьное название темы.
Фразы помогите")

вот "Фразы помогите" уже на на второй строке
вот именно в таком варианте мне интересно что произойдет?

Octane 23.09.2009 19:20

Цитата:

Сообщение от getme
таком варианте мне интересно что произойдет?

startContainer и endContainer будут разные, что не так? Когда выделение будет в пределах одного контейнера, тогда startContainer и endContainer будут совпадать.

Для точного определения визуальных границ выделения, можно добавить какие-нибудь свои элементы в начало и конец выделения, чтобы определить их координаты. У новых W3C-браузеров тоже есть метод getBoundingClientRect, но только для элементов, с объектом Range не работает.

Координаты элемента на странице


Часовой пояс GMT +3, время: 03:39.