Получить курсор в элементе с 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. Есть какие-нибудь идеи на этот счёт? |
Так... Уже лучше :) Нашёл решение для основных браузеров, кроме ИЕ:
window.getSelection().getRangeAt(0).startOffset Как-же быть с осликом то, кто-нибудь посоветует? |
Вопрос решён. Если кому-то интересно:
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; } |
для такой простой задачи вообще не нужно знать позицию курсора. есть специальные ручки для вставки в позицию курсора произвольного хтмл
|
tenshi, а можно поподробнее?
|
ie
Цитата:
Цитата:
|
da_ff, спс, но в Опере добавляет всегда в начало, не могу понять почему...
|
Кстати, в Опере
document.execCommand('insertimage', true, this.src);тоже добавляет всегда в начало... Что это за фигня такая? И ещё, в диве c contentEditable="true" такая штука наблюдается, что все вставленные в него img ресайзятся, как эту ресизабельность отключить? |
видимо вручную задавая размеры картинке
|
ie
Цитата:
Цитата:
|
da_ff, я уже нашёл)) Осталось разобраться с Оперой, там в приведённом вами примере для Gecko она вставляет в начало текстовой области...
|
Maxman,
возможно это кусок из старого проекта, сейчас уже не помню были ли проблемы с оперой и что делал |
Здравствуйте, уважаемые. Не хочется плодить темы, поэтому здесь задам вопрос.
Возникла следующая проблема. Если я в див вставляю <span> то в CHROME курсор остается в нем.(то есть при следующей вставке новый html вставляется в span, а не див). var el =document.createElement('i'); el.style.color='red'; el.innerHTML='fg45'; selectionRange = window.getSelection().getRangeAt(0); selectionRange.deleteContents(); selectionRange.insertNode(el); window.getSelection().removeAllRanges(); selectionRange = document.createRange(); selectionRange.selectNode(el); selectionRange.collapse(false); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(selectionRange); Следующий код нормально работает в FF и Опере. Натолкните на мысль |
Все разобрался, это баг CROME
|
Часовой пояс GMT +3, время: 07:38. |