0

我有一个像这样的网站：

<!DOCTYPE html>
<html>
<body>

<script src="jquery-2.0.3.min.js"></script>

<div id="block">
<span id="c1" class="chunk">first </span>
<span id="c2" class="chunk">second </span>
<span id="c3" class="chunk">third </span>
</div>

<script>

    var my = {
        mousedown: function(event) {
            $('.chunk').each(function() {
                this.setAttribute('contenteditable', 'false');
            });
        },
        mouseup: function(event) {
            $('.chunk').each(function() {
                this.setAttribute('contenteditable', 'true');
            });
        }
    };

    $('.chunk')
    .on('mousedown', my.mousedown)
    .on('mouseup', my.mouseup)
    ;

    my.mouseup(null);

</script>

</body>

</html>

期望的结果就像在 chrome 中一样：

当我单击该块时，我可以编写文本并看到一个插入符号（光标），并且当我选择 contenteditable 时在选择时被禁用

但在 Firefox 中：

我不能再在 contenteditable 内输入了，因为 onmousedown 会在 onclick 时禁用 contenteditable（我认为）

你能帮忙修理吗？我正在寻找跨浏览器的解决方案。请

4

1 回答 1

0

答案似乎比我想象的要简单。主要包含的父项必须具有 contenteditable=true，在此之后，一切都在每个浏览器中正常工作。现在模拟 selectstart 的 mousemove 和 mousedown 也可以正常工作（该项目的另一个特性），所以在遇到类似问题时请记住：只需创建一个 contenteditable 主容器，您将不会遇到选择问题

<!DOCTYPE html>
<html>
<body>

<script src="jquery-2.0.3.min.js"></script>

<div id="block" contenteditable="true">
<span id="c1" class="chunk">first </span>
<span id="c2" class="chunk">second </span>
<span id="c3" class="chunk">third </span>
</div>

</body>

</html>
于 2013-08-03T22:23:25.223 回答