Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.04.2013, 19:36
Новичок на форуме
Отправить личное сообщение для Atarion Посмотреть профиль Найти все сообщения от Atarion
 
Регистрация: 20.04.2013
Сообщений: 2

полный мрак с позицией курсора в editable div
очень долго искал решение которое может отыскать позиции курсора в таком div для того чтобы в свою очередь найти координаты выделения, а это для работы с содержимым в стиле редактора wysiwyg.
Нашел с огромным трудом кое как работающую процедуру - но потом оказалось что если в диве был нажат enter(перевод текста на другую строку) то она допускает грубую ошибку в позиции.

Подскажите пожалуйста саму концепцию, в какую сторону копать чтобы получить возможность через innerhtml нормально оперировать с выделенным текстом.
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2013, 19:50
Интересующийся
Отправить личное сообщение для wc3banderlog Посмотреть профиль Найти все сообщения от wc3banderlog
 
Регистрация: 30.01.2011
Сообщений: 23

Попробуйте поискать по фразе "javascript: получение выделенного текста".

<script language=javascript>
function getSelText()
{
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.getSelection) {
        return document.getSelection();
    } else if (document.selection) {
        return document.selection.createRange().text;
    } else return;
}
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 25.04.2013, 21:25
Новичок на форуме
Отправить личное сообщение для Atarion Посмотреть профиль Найти все сообщения от Atarion
 
Регистрация: 20.04.2013
Сообщений: 2

я бы и сам с удовольсвтием получал то что вы предлагаете. да вот беда: если выделенный элемент в тексте повторяется это не работает. а что если к примеру пользователь выделит одну букву?
Ответить с цитированием
  #4 (permalink)  
Старый 26.04.2013, 00:20
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,492

Да - это ад и полная ж. Сраный contenteditable годится только для создания демок wisiwig и ни на что больше. Любое иное применение требует сотен и сотен костылей. Код на 90% должен состоять из них чтобы работал более менее понятно адекватному человеку. Потому в интернете и нет "простеньких решений" на contenteditable, только многотонные, заточенные под конкретную задачу вещи.
Я нетнавижу contenteditable.

Теперь собсно к теме. Для работы с contenteditable предполагается что не требуется знания какой-то конкретной численной позиции курсора.
Вы получаете getSelection(), у которого есть anchorNode - нода в которой начинается выделение и achorOffset - позиция в этой ноде. Считается что этого вам достаточно для работы.

Конкретно текстовую позицию можо полчить примерно так:
var sel = getSelection(), //получаем выделение
    l = sel.rangeCount, //количество выделений(например с клавишей ctrl)
    ranges = new Array(l); //временный массив range

for(var i = 0; i<l; i++) {
    ranges[i] = sel.getRangeAt(i); //запоминаем все текущие выделения
}

sel.collapseToStart(); //коллапсируем к началу выделения(КО)
sel.extend( elem /*contenteditable-элемент*/, 0); //расширяем выделение до начала редактируемого элемента

var position = sel.toString().length; //получаем длину строки, получившийся из выделенного.

sel.removeAllRanges(); //очищаем выделение

for(var i = 0; i<l; i++) {
    sel.addRange(ranges[i])  //возвращаем как было до
}
И то это только концепт, придётся ешё для каждого браузера понаписать костылей.
__________________
29375, 35
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Установка курсора в div с contentEditable=true fr0st1k Элементы интерфейса 7 11.01.2012 16:06