1

问题在于execCommand,即使在IE10中也没有正确执行。 例如, 当我点击粗体并继续打字时,在IE中它不会使字母变为粗体,我必须选择文本并单击粗体以使粗体显示。在所有其他浏览器中,当我点击粗体按钮并继续输入时,它将使字母变为粗体。execCommand在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/

请帮助用链路,提前

回答

1

问题ISN谢谢与document.execCommand()联系。相反,问题似乎是单击按钮时可编辑元素失去焦点,结果在焦点恢复时失去了大胆。

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

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

此外,也可以使按钮可选择。例如,请参阅https://stackoverflow.com/a/12527098/96100

相关问题