Показать сообщение отдельно
  #2 (permalink)  
Старый 28.12.2010, 19:30
Новичок на форуме
Отправить личное сообщение для fel1ow Посмотреть профиль Найти все сообщения от fel1ow
 
Регистрация: 25.11.2010
Сообщений: 3

Решение задачи.
Задачу решили следующим способом: делается клон упомянутого TA, от текста что внутри ТА берётся только часть от начала текста до выделения и запихивается в клон, который конечно же не просто лежит в памяти а уже подключён в DOM структуру, к примеру методом appendChild, в какой то див абсолютно расположенный вне зоны видимости экрана (top:-1000;left:-1000. Далее смотрим у клона параметр scrollHeight который вернёт высоту скрола клона в пикселях. Теперь это значение можно задать нашей главной ТА через параметр scrollTop. Это всё, скрол должен опуститься на нужное расстояние к выделенному тексту. Может быть погрешность в одну строчку что решается отниманием высоты одной строки от значения которое мы получили. Вот код решения с использованием библиотеки ExtJS:

var obj = document.getElementById("text_area");
obj.focus();

var proxy = obj.cloneNode(false);
proxy.id = Ext.id();
var hidden_div = Ext.get("HIDDEN_CONTAINER");
var proxy_extjs = Ext.get(proxy);
hidden_div.appendChild(proxy_extjs);

// Opera and FF
if ( !Ext.isIE )
{
var start = obj.selectionStart;
var end = obj.selectionEnd;
}
else
{
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText( obj );
stored_range.setEndPoint( 'EndToEnd', range );
var start = stored_range.text.length - range.text.length;
var end = start + range.text.length;
}

if ( Ext.isIE )
var line_height = document.getElementById(obj.id).currentStyle["line-height"];
else
{
var elstyle = window.getComputedStyle(document.getElementById(ob j.id), "");
var line_height = elstyle.getPropertyValue("line-height");
}

line_height = parseInt(line_height.replace("px"));
proxy.value = obj.value.substr(0,start);

var new_scroll_value = proxy.scrollHeight - line_height;

if ( obj.clientHeight > new_scroll_value )
obj.scrollTop = 0;
else
obj.scrollTop = new_scroll_value;

proxy_extjs.remove();

Самое последнее условие написано для того что бы учесть такой момент: если текст в клоне влазит в область видимости клона и слишком мал для того что бы в клоне появился скрол то свойство клона scrollHeight вернёт минимально возможное значение скола для ТА такого размера, тоесть по сути вернёт рабочую область видимости ТА. Поэтому мы должны проверять этот момент проверять, и в случае если scrollHeight возвращает значение меньшее чем его рабочая область видимости то scrollTop нашей ТА мы присваиваем нулевое значение. Таким образом скол окажется в самом верхнем положении и выделение должно быть перед глазами пользователя.
Ответить с цитированием