execCommand在IE中无法正常工作

Question

问题出在execCommand上，即使在IE10中也没有在IE中执行。 例如，当我单击粗体并继续输入时，在IE中，它不是使字母变为粗体，我必须选择文本并单击粗体以使其变为粗体。 在所有其他浏览器中，当我单击加粗按钮并继续键入时，它将使字母变为粗体。

这是jsfiddle的链接http://jsfiddle.net/Q65Qt/

这是代码

var oDoc, sDefTxt;

function initDoc() {
    oDoc = document.getElementById("textBox");
    sDefTxt = oDoc.innerHTML;
    if (document.compForm.switchMode.checked) {
        setDocMode(true);
    }
}

function formatDoc(sCmd, sValue) {
    if (validateMode()) {
        document.execCommand(sCmd, false, null);
        oDoc.focus();
    }
}

function validateMode() {
    if (!document.compForm.switchMode.checked) {
        return true;
    }
    alert("Uncheck \"Show HTML\".");
    return false;
}

function setDocMode(bToSource) {
    var oContent;
    if (bToSource) {
        oContent = document.createTextNode(oDoc.innerHTML);
        oDoc.innerHTML = "";
        var oPre = document.createElement("pre");
        oDoc.contentEditable = false;
        oPre.id = "sourceText";
        oPre.contentEditable = true;
        oPre.appendChild(oContent);
        oDoc.appendChild(oPre);
    } else {
        if (document.all) {
            oDoc.innerHTML = oDoc.innerText;
        } else {
            oContent = document.createRange();
            oContent.selectNodeContents(oDoc.firstChild);
            oDoc.innerHTML = oContent.toString();
        }
        oDoc.contentEditable = true;
    }
    oDoc.focus();
}

这是jsfiddle的链接http://jsfiddle.net/Q65Qt/

请帮助，在此先谢谢

Answer 1

问题不在于document.execCommand() 。 相反，问题似乎是单击按钮时可编辑元素失去焦点，结果恢复焦点时失去了粗体。

最简单的解决方案是防止按钮单击窃取焦点。 您可以通过使用mousedown事件而不是click事件并阻止浏览器的默认行为来做到这一点：

http://jsfiddle.net/Q65Qt/1/

或者，您可以使按钮不可选。 例如，请参阅https://stackoverflow.com/a/12527098/96100 。