GetSelection() не работает в IE

Может кто-нибудь помочь мне получить этот код, работающий в IE, пожалуйста:

HTML:

<p>Alex Thomas</p>
<button id="click">Click</button>

$('#click').click(function(){
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();
    var span = document.createElement("span");
    span.style.color = "red";
    span.appendChild(selectionContents);
    range.insertNode(span);
});

Закодировано здесь: http://jsfiddle.net/WdrC2/

Спасибо заранее...

Ответ 1

IE до 9 не поддерживает window.getSelection(). Вместо этого вы можете использовать document.selection (см. эту страницу msdn для описания). Этот объект выделения имеет метод createRange(), который возвращает объект TextRange (подробнее см. эту страницу msdn).

Обратите внимание, что объекты selection и TextRange являются собственной реализацией Microsoft и не соответствуют стандартам W3C. Вы можете больше узнать о проблемах TextRange и range на www.quirksmode.org/dom/range_intro.html.

В IE реализована следующая реализация:

$('#click').click(function(){
    var range = document.selection.createRange();
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
});

Это не так хорошо, как другая реализация, так как вам нужно работать со строками вместо dom. Существует небольшой взлом, в который вы вставляете <span id="myUniqueId"></span> в качестве заполнителя, а затем заменяете его с помощью dom. Вам все равно придется работать с range.htmlText или range.text.

BTW: вышеприведенная реализация, очевидно, только IE. Вы должны использовать некоторое определение возможностей браузера, чтобы решить, какую версию использовать.

Ответ 2

Проверьте это здесь: http://jsfiddle.net/6BrWe/

Это немного взломанный и не очень красивый, но должен работать в IE и других браузерах - я не сделал много кросс-браузерных тестов:)

$('#click').click(function() {
    var whatBrowser = getIt();
    if (whatIsIt == 'notIE' && whatBrowser) {
        notIE(whatBrowser);
    }
    else if (whatIsIt == "isIE"&& whatBrowser) {
        isIE(whatBrowser);
    };
});

var whatIsIt = "";

function getIt() {
    if (window.getSelection) {
        whatIsIt = "notIE";
        return window.getSelection();
    }
    else if (document.getSelection) {
        whatIsIt = "notIE";
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            whatIsIt = "isIE";
            return selection;
        };
        return false;
    };
    return false;
};

function isIE(selection) {
    if (selection) {
        var selectionContents = selection.text;
        if (selectionContents) {
            selection.pasteHTML('<span class="reddy">' + selectionContents + '</span>');
        };
    };
};

function notIE(selection) {
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();
    var span = document.createElement("span");
    span.className= "reddy";
    span.appendChild(selectionContents);
    range.insertNode(span);
};

Ответ 3

Для решения crossbrowser см. этот вопрос в StackOverflow: Есть ли кросс-браузерное решение для getSelection()?

Этот вопрос не совсем повторяется, поэтому я считаю полезным связать вопрос в этом ответе. Я сделал этот ответ wiki сообщества.

Ответ 4

Если вы хотите покрасить "Alex Thomas" на красный, вы можете сделать

HTML

<p id='txt'>Alex Thomas</p>
<input type='button' id='btn' value='click' />

$('#click').click(function(){
  $('#txt').attr('color','Red');
});