Question

有人可以解释为什么单击按钮会在contentEditable div中触发浏览器编辑但是单击调用相同execCommand的div不会？在http://jsfiddle.net/GgX8G/3/中，我有一个触发相同代码的按钮和div，但只有按钮执行粗体操作：

<div id="boldB">B</div>
<button id="bld">B</button>

$(document).ready(function(){  
    $('#boldB').click(function() {
            document.execCommand('bold', false, null);
            alert("clicked the B div");
        });

    $('#bld').click(function() {
            document.execCommand('bold', false, null);
            alert("clicked the B button");
        });
});

由于

Answer 1

当您点击div时，当前选定的div会失去焦点，因此execCommand功能无法执行任何操作。您需要提前捕获事件（例如，在鼠标按下时），并阻止它。示例：http://jsfiddle.net/GgX8G/13/

逐行说明：

$('#boldB').mousedown(function(e) {

在点击事件之前和焦点变化之前调用mousedown事件，使我们有机会阻止它发生变化。

    e.preventDefault();

在事件对象上调用preventDefault将阻止后续的默认操作发生，即更改焦点。

    document.execCommand('bold', false, null);

完成此操作后，您可以安全地execCommand div，因为它仍处于焦点位置且选择完好无损。

Answer 2

在这里，试试这个http://jsfiddle.net/GgX8G/7/

你想要的jquery是这样的：

$("#boldB").css("font-weight", "bold");

为什么我不能通过点击DIV来加粗文字？

2 个答案: