Question

我有一个类似的网站：

<!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：

我无法在满足的内容中输入任何内容因为onmousedown在onclick（我认为）

的时间内禁用了contenteditable

可以帮助修复吗？我正在寻找跨浏览器解决方案。请

Answer 1

我认为答案似乎更简单。主要包含父级必须具有contenteditable = true，在此之后，所有浏览器中的所有内容都应该如此。现在，mousemove和mousedown模拟selectstart也可以像他们应该的那样工作（这个项目的另一个特性），所以请记住遇到类似的问题时：只需创建一个可信的主容器，你就不会遇到选择问题 < / p>

<!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>

选择时满足动态

1 个答案: