Как получить выделенный текст в текстовой области с помощью jQuery в Internet Explorer 7?

Я попробовал плагин jquery-fieldselection, чтобы получить выделенный текст в текстовой области.

Он отлично работает в Firefox и Chrome, но не в Internet Explorer 7.

Я использую метод getSelection() следующим образом:

textarea.getSelection();

Когда текст в текстовой области равен 12345, и весь этот текст выделен, Firefox и Chrome возвращают:

start: 0    // Correct!
end: 5

в то время как Internet Explorer 7 возвращает:

start: 5    // Why ??
end: 5

Я ищу кросс-браузерное решение с использованием jQuery.


javascript textselection jquery textarea internet-explorer-7
person Misha Moroshko    schedule 25.08.2011    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

используйте следующий метод:

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

как это использовать:

вам нужен объект dom текстовой области.. таким образом:

var textArea=    $("textarea")[0] or getElementbyId("textareaid");

var selectedText=getInputSelection(textArea);

var start=selectedText.start;
var end=selectedText.end;

Демо

person Baz1nga    schedule 25.08.2011
comment
Кстати, этот метод использовался нами в одном из наших проектов, и я не уверен в его происхождении. - person Baz1nga; 25.08.2011
comment
Я попытался изменить ваш <input> на <div>, и это не работает в IE7. Не могли бы вы сказать, почему? Демо здесь: jsfiddle.net/RbSLw/1 - person Misha Moroshko; 25.08.2011
comment
Эта функция принадлежит мне. Я разместил его в разных местах на Stack Overflow. Вот один пример: stackoverflow.com/questions/263743/ - person Tim Down; 25.08.2011
comment
Добавление unselectable="on" к <div> решило проблему. - person Misha Moroshko; 25.08.2011

arrow_upward
4
arrow_downward

Вот очень краткий и компактный плагин jquery, который работает для IE7, IE8, IE9, FF, Chrome.. Позволяет вам получить / установить начальную и конечную позицию выделения, а также программно заменить выделенный текст. Рабочий пример/версия кода находится здесь: http://jsfiddle.net/hYuzk/3/ версия с более подробными комментариями и т. д. находится здесь: http://jsfiddle.net/hYuzk/4/

person Farrukh Aziz    schedule 02.09.2012