Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.08.2014, 02:46
Интересующийся
Отправить личное сообщение для vanicon Посмотреть профиль Найти все сообщения от vanicon
 
Регистрация: 17.01.2010
Сообщений: 15

Получение позиции курсора в div
Всем привет.
Есть див с contenteditable=true и необходимо добавить возможность вставки смайликов.
Полазив по интернету нашел вот такое решение:
function getCaretPos(element) {
	element.focus();
	if (document.selection) {
		var sel = document.selection.createRange();
		var clone = sel.duplicate();
		sel.collapse(true);
		clone.moveToElementText(element);
		clone.setEndPoint('EndToEnd', sel);
		return clone.text.length;
	} else {
		return window.getSelection().getRangeAt(0).startOffset;
	}
	return 0;
}

И вроде бы работает, но позиция курсора возвращается без учета html кода, так же нужно и изменять положение курсора после вставки кода.
Может кто-нибудь уже сталкивался с этой задачей и имеются наработки?
Ответить с цитированием
  #2 (permalink)  
Старый 16.08.2014, 16:01
Интересующийся
Отправить личное сообщение для vanicon Посмотреть профиль Найти все сообщения от vanicon
 
Регистрация: 17.01.2010
Сообщений: 15

Вот, нашел на просторах интернета, вроде работает
function insertNodeOverSelection(node, containerNode) {
	var sel, range, html;
	if (window.getSelection) {
		sel = window.getSelection();
		if (sel.getRangeAt && sel.rangeCount) {
			range = sel.getRangeAt(0);
			if (isOrContainsNode(containerNode, range.commonAncestorContainer)) {
				range.deleteContents();
				range.insertNode(node);
				range = range.cloneRange();
				range.setStartAfter(node);
				range.collapse(true);
				sel.removeAllRanges();
				sel.addRange(range);
			} else {
				containerNode.appendChild(node);
			}
		}
	} else if (document.selection && document.selection.createRange) {
		range = document.selection.createRange();
		if (isOrContainsNode(containerNode, range.parentElement())) {
			html = (node.nodeType == 3) ? node.data : node.outerHTML;
			range.pasteHTML(html);
		} else {
			containerNode.appendChild(node);
		}
	}
}
Ответить с цитированием
  #3 (permalink)  
Старый 16.08.2014, 16:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

vanicon,
Цитата:
В статье описывается опыт создания текстового поля с возможностью вставки смайлов
http://habrahabr.ru/post/232965/
Демо
Ответить с цитированием
  #4 (permalink)  
Старый 16.08.2014, 16:18
Интересующийся
Отправить личное сообщение для vanicon Посмотреть профиль Найти все сообщения от vanicon
 
Регистрация: 17.01.2010
Сообщений: 15

рони, Спасибо, не натыкался почему-то на эту статью
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка div в независимости от положения курсора Lexussab jQuery 4 17.02.2014 22:55
полный мрак с позицией курсора в editable div Atarion Элементы интерфейса 3 26.04.2013 00:20
Получение позиции курсора spahi4 Events/DOM/Window 0 12.02.2012 16:06
Получение позиции в курсора в textArea? mister_maxim Internet Explorer 0 03.06.2011 09:50
установка позиции курсора или выделения в iframe mister_maxim Events/DOM/Window 5 18.04.2009 10:43