Question

我面临以下问题：

当我将光标放到某个位置，然后在除IE以外的所有浏览器中应用execCommand（＆＃39; bold＆＃39;）时，下一个输入的文本将为粗体，但在IE中，它会使所有单词变为粗体。

这是使图像更清晰的图像。正常/可预期的行为（Crhome，Firefox等）：

IE中的行为：

以下是codesnippet，也可以在jsfiddle找到。

＆＃13;

var lastCaretIndex = null;
    document.addEventListener('selectionchange', function(event) {
        var taget = event.target;
        if (taget.activeElement.id == 'main-input') {
            lastCaretIndex = getSelectionRange();

            console.log(typeof lastCaretIndex);
            console.log(lastCaretIndex);
        }
    });

    function afterFocus() {
        var s = null;
        if (window.getSelection) {
            s = window.getSelection();
        } else {
            s = document.getSelection();
        }

        if (lastCaretIndex == null) {
            lastCaretIndex = document.createRange();
        } else if (s.rangeCount > 0) {
            s.removeAllRanges();
            s.addRange(lastCaretIndex);
        }
    }

    function getSelectionRange() {
        var sel;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                return sel.getRangeAt(0);
            }
        } else if (document.selection) {
            return document.createRange();
        }

        return null;
    }

    $(document).on('click', '.icon-bold', function () {
        document.getElementById('main-input').focus();
        afterFocus();
        document.execCommand('bold');
        handleButtonActiveState($(this));
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main-input" contenteditable="true">Hello world!</div>
<button type="button" class="icon-bold">Bold</button>

＆＃13;

请有人帮助我。我试图在互联网上找到解决方案，但没有得到任何结果。它似乎与TextRange无关。

P.S。如果需要别的东西，请告诉我。

Answer 1

您可以使用Andibioticum's workaround在Internet Explorer中获得与在Chrome和Firefox中相同的行为。他在空的选定范围内插入一个虚拟角色，执行操作，然后删除虚拟角色。

我使用Royi建议的IE browser detection technique将其与您的案例相匹配，并结合检查旧版IE的document.all。您可以在this jsFiddle和下面的代码段中看到结果。

var range = null;

document.addEventListener('selectionchange', function(event) {
    var taget = event.target;
    if (taget.activeElement.id == 'main-input') {
        range = getSelectionRange();
    }
});

function isIE() {
    return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
}

function execBoldCommand() {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    } else {
        var s = null;
        if (window.getSelection) {
            s = window.getSelection();
        } else {
            s = document.getSelection();
        }

        if (isIE()) {
            var selRange = s.getRangeAt(0);

            //Insert node with dummy text 'd'
            var newNode = document.createTextNode('d');
            selRange.insertNode(newNode);
            s.removeAllRanges();
            s.addRange(selRange);

            //Execute command on dummy
            document.execCommand('bold');

            //Delete dummy from range
            selRange.setStart(newNode, 0);
            selRange.setEnd(newNode, 1);
            selRange.deleteContents();

            s.removeAllRanges();
            s.addRange(selRange);
        } else {
            if (range == null) {
                range = document.createRange();
            }
            s.removeAllRanges();
            s.addRange(range);
            document.execCommand('bold');
        }
    }
}

function getSelectionRange() {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection) {
        return document.createRange();
    }

    return null;
}

$(document).on('click', '.icon-bold', function() {
    $('#main-input').focus();
    execBoldCommand();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main-input" contenteditable="true">Hello world!</div>
<button type="button" class="icon-bold">Bold</button>

document.exec命令在具有折叠范围的IE中无法正常工作（用户选择）

1 个答案: