Как я могу рассчитать высоту выделения текста без изменения DOM - PullRequest
Новая
       15

Как я могу рассчитать высоту выделения текста без изменения DOM

6 голосов
/ 27 июля 2011

Я использую Range для манипулирования выделенным текстом. Я хотел бы рассчитать высоту, с которой кто-то начал выделять текст, где он закончил.

Я пробовал интервал до начала и конца выбранного диапазона, и я могу точно рассчитать форму высоты, которая изменяет DOM и не позволяет мне выполнять какие-либо другие манипуляции с диапазоном, такие как выделение ранее выбранного текста.

Я также пытался собрать положение позиций mosedown и mosueup, но мне нужна точная высота от верхней части текста, выделенного до нижней части текста, где выделение было отменено, и это не всегда так.

Так мне было интересно, есть ли способ вычислить высоту выделения текста без изменения DOM?

Ответы [ 3 ]

6 голосов
/ 05 августа 2011

Зависит от того, с какими браузерами вам нужно иметь дело.Вот функция, которая будет работать в IE> = 4 и браузерах, которые поддерживают getClientRects() в Range (Firefox> = 4, WebKit с 2009 г., Opera).Если вам нужна поддержка более ранних браузеров, вам нужно изменить DOM, что на самом деле хорошо, если вы восстановите DOM в прежнее состояние.

jsFiddle: http://jsfiddle.net/W84yW/

Код: 

function getSelectionHeight() {
    var selHeight = 0;
    if (document.selection && document.selection.type == "Text") {
        var textRange = document.selection.createRange();
        selHeight = textRange.boundingHeight;
    } else if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            if (!range.collapsed && range.getClientRects) {
                var startRange = range.cloneRange();
                startRange.collapse(true);
                var selTop = startRange.getClientRects()[0].top;
                startRange.detach();
                var endRange = range.cloneRange();
                endRange.collapse(false);
                selHeight = endRange.getClientRects()[0].bottom - selTop;
                endRange.detach();
            }
        }
    }
    return selHeight;
}
0 голосов
/ 27 июля 2011

Я не думаю, что скрытый подход DIV будет работать.Многие браузеры либо не будут иметь высоту, либо будут иметь высоту = 0 для таких скрытых элементов.

Возможно, если вы клонировали эту часть DOM и добавили ее в документ с какой-то сумасшедшей позицией(например, left: -1000px), вы можете получить значение.

Несмотря на это, я думаю, у вас возникнут проблемы с получением согласованных результатов с использованием обходных путей, если объект Range не предоставляет эти данные для вас.

0 голосов
/ 27 июля 2011

Я бы получил выделенный текст и поместил бы его в скрытый div с той же шириной и теми же стилями, и получил бы его высоту.

...