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

Question

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

HTML:

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

JS

$('#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/

Заранее спасибо ...

Answer 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.

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

Answer 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);
};

Answer 3

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

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

Answer 4

Если вы хотите покрасить «Алекс Томас» в красный, вы можете сделать

HTML

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

JS

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