在 IE 冲突中使用 createRange()

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

}

我正在做的是创建一个简单的所见即所得，只是为了向显然经过处理以显示正确的 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 个线程，这是一个笑话。

我在以下线程中找到了答案：

为什么从文本区域获取文本选择在单击按钮时有效，但在单击“div”时无效（Internet Explorer）

如何阻止按钮提交表单。

两者都在 stackoverflow.com 中，

无论出于何种原因，当单击按钮以外的元素时，IE 都会失去文本区域的焦点，在我的例子中，跨度看起来像带有 css 的按钮。但问题是，单击按钮提交表单，而我不希望发生这种情况，这就是我选择屏蔽跨度的原因。

由于 IE 行为，我改为使用按钮标记，并在 onclick 属性中添加：

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

该解决方案的唯一问题如下，如果函数抛出异常，请以任何方式提交表单。所以我必须稍微改变一下代码以避免异常。我的一个坏代码习惯。使代码难以调试。

有关此内容的更多信息，请参阅最后链接的线程。