Использование createRange () в конфликте IE

Question

Вот и мы снова.Я весь день искал решение этой проблемы ...

Я получил код:

var formatString = function(t,style){
    var el = $(t);
    var pre;
    var start;
    var end;
    var len;
    var replace;
    switch(style){
        case 'italic':
            pre = '[em]';
            break;
        case 'bold':
            pre = '[b]';
            break;
        case 'paragraph':
            pre = '[p]';
            break;
    }

    if(document.selection){
        el.focus();
        var sel = document.selection.createRange();
        // Finally replace the value of the selected text with this new replacement one
        sel.text = pre + sel.text + pre.replace(/(\[)/,'[/');
    } else {
        len = el.val().length;
        start = t.selectionStart;
        end = t.selectionEnd;
        sel = el.val().substring(start, end);
        replace = pre + sel + pre.replace(/(\[)/,'[/');
        el.val(el.val().substring(0,start) + replace + el.val().substring(end,len));
    }

}

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

Проблема, которая возникает, заключается в том, что любимый IE отменяет выделение любого текста, выделенного при нажатии за пределами текстовой области.И это приводит к тому, что у объекта sel.text нет текста.

Я запускаю функцию следующим образом:

<button onclick="formatString($('#textid')[0],'italic')">Italic</button>

Когда вы нажимаете кнопку, другие браузеры выводят

'the italic text' // output the [em]italic[/em] text - when italic is selected
IE output 'the [em][/em]italic text'

Если это то же самое, что и другой поток, просто наведите меня на него, буквально я прочитал более 200 потоков, и ничто не указало на эту проблему.

Answer 1

ОК, потому что никто не ответил, я расширил исследование и прочел еще около 100 тем, это шутка.

Я нашел ответ в следующих темах:

Почемуполучение выделенного текста из textarea работает при нажатии кнопки, но не при нажатии кнопки «div» (Internet Explorer)

Как запретить кнопкам отправлять форму.

Оба здесь, в stackoverflow.com,

По любой причине IE теряет фокус из текстовой области при нажатии на элемент, отличный от кнопки, в моем случае диапазон, похожий на кнопку с css,Но проблема в том, что нажатие кнопки отправляет форму, и я не хотел, чтобы это произошло, поэтому я решил замаскировать диапазон.

Поскольку в IE я использовал тег кнопки вместо атрибута onclickadd:

<button onclick="formatString($('#textid')[0].'italic'); return false">Italic</button>

Единственная проблема с этим решением заключается в следующем: если функция выдает исключение, отправьте форму любым способом.Поэтому я должен немного изменить код, чтобы избежать исключений.Моя плохая привычка.Создание кода для отладки сложно.

Более подробная информация об этом в последней связанной теме.