Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.10.2011, 20:07
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

Получить курсор в элементе с contentEditable="true"
Здравствуйте. Есть такая задача, нужно вставлять смайлы в текстовое поле, перед курсором (кареткой) соответственно. В качестве текстовой области используется <div contentEditable="true">
Для получения позиции текстового курсора, пробовал такой код:
function getCaretPosition (ctrl) {
	var CaretPos = 0;
	// IE
	if (document.selection) {
		ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	// Gecko
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;
	return CaretPos;
}
Но, он работает только с textarea. Есть какие-нибудь идеи на этот счёт?

Последний раз редактировалось Maxman, 03.10.2011 в 21:22.
Ответить с цитированием
  #2 (permalink)  
Старый 03.10.2011, 21:41
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

Так... Уже лучше Нашёл решение для основных браузеров, кроме ИЕ:
window.getSelection().getRangeAt(0).startOffset

Как-же быть с осликом то, кто-нибудь посоветует?
Ответить с цитированием
  #3 (permalink)  
Старый 03.10.2011, 23:13
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

Вопрос решён. Если кому-то интересно:
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;
}

Последний раз редактировалось Maxman, 05.10.2011 в 18:10.
Ответить с цитированием
  #4 (permalink)  
Старый 04.10.2011, 10:46
Профессор
Отправить личное сообщение для tenshi Посмотреть профиль Найти все сообщения от tenshi
 
Регистрация: 20.03.2008
Сообщений: 1,183

для такой простой задачи вообще не нужно знать позицию курсора. есть специальные ручки для вставки в позицию курсора произвольного хтмл
__________________
.ня
Ответить с цитированием
  #5 (permalink)  
Старый 04.10.2011, 10:49
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

tenshi, а можно поподробнее?
Ответить с цитированием
  #6 (permalink)  
Старый 04.10.2011, 11:22
Профессор
Отправить личное сообщение для da_ff Посмотреть профиль Найти все сообщения от da_ff
 
Регистрация: 12.05.2009
Сообщений: 317

ie
Цитата:
el = '<img src="' + src + '" alt="' + title + '" contentEditable="false" onResizeStart="return false">';
selectionRange = wnd.document.selection.createRange();
selectionRange.pasteHTML(el);
selectionRange.collapse(true);
gecko
Цитата:
el = wnd.document.createElement('img');
el.src = src;
el.alt = title;

selectionRange = wnd.getSelection().getRangeAt(0);
selectionRange.deleteContents();
selectionRange.insertNode(el);
wnd.getSelection().collapseToEnd();
wnd.getSelection().removeAllRanges();

selectionRange = wnd.document.createRange();
selectionRange.selectNode(el);
wnd.getSelection().addRange(selectionRange);
wnd.getSelection().collapseToEnd();
Ответить с цитированием
  #7 (permalink)  
Старый 04.10.2011, 19:55
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

da_ff, спс, но в Опере добавляет всегда в начало, не могу понять почему...
Ответить с цитированием
  #8 (permalink)  
Старый 05.10.2011, 11:27
Кандидат Javascript-наук
Отправить личное сообщение для Maxman Посмотреть профиль Найти все сообщения от Maxman
 
Регистрация: 18.06.2010
Сообщений: 122

Кстати, в Опере
document.execCommand('insertimage', true, this.src);
тоже добавляет всегда в начало... Что это за фигня такая? И ещё, в диве c contentEditable="true" такая штука наблюдается, что все вставленные в него img ресайзятся, как эту ресизабельность отключить?

Последний раз редактировалось Maxman, 05.10.2011 в 18:15.
Ответить с цитированием
  #9 (permalink)  
Старый 06.10.2011, 00:11
Профессор
Отправить личное сообщение для tenshi Посмотреть профиль Найти все сообщения от tenshi
 
Регистрация: 20.03.2008
Сообщений: 1,183

видимо вручную задавая размеры картинке
__________________
.ня
Ответить с цитированием
  #10 (permalink)  
Старый 06.10.2011, 12:04
Профессор
Отправить личное сообщение для da_ff Посмотреть профиль Найти все сообщения от da_ff
 
Регистрация: 12.05.2009
Сообщений: 317

ie
Цитата:
onResizeStart="return false"
gecko
Цитата:
wnd.document.execCommand('enableObjectResizing', false, false);
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Не могу получить значение атрибута DenQ jQuery 9 06.02.2011 14:33
Получить значения доп. полей select-option arcanerain Общие вопросы Javascript 11 29.09.2010 03:02
Курсор в designMode tito_spades Элементы интерфейса 1 13.07.2010 16:28
Как получить указатель на элемент вызвавший функцию pelayo Общие вопросы Javascript 9 29.06.2010 23:32