在IE冲突中使用createRange()

时间:2011-12-01 21:46:56

标签: javascript internet-explorer textarea

我们再来一次。我一整天都在寻找解决这个问题的方法......

我收到了代码:

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之外,所有浏览器都能正常运行。

正在发生的问题是,当您在textarea外部点击时,心爱的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多个线程,并没有指出这个问题。

1 个答案:

答案 0 :(得分:0)

好的,因为没有人有答案我扩展了我的研究并阅读了大约100个主题,这是一个笑话。

我在以下主题中找到了答案:

Why getting a text selection from textarea works when a button clicked but not when a "div" clicked (Internet Explorer)

How to prevent buttons to submit a form.

这两者都在stackoverflow.com,

出于任何原因,当点击按钮以外的元素时,IE会失去焦点,而在我的情况下,一个跨度看起来像一个带有css的按钮。但问题是单击一个按钮提交一个表单,我不希望发生这种情况,这就是我选择掩盖一个范围的原因。

因为IE行为我使用了按钮标签而在onclick属性中添加了:

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

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

在上一个链接的帖子中有关于此的更多信息。