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>

望ましい結果はクロムのようです:

チャンクをクリックすると、テキストを書き込むことができ、キャレット (カーソル) が表示され、選択すると contenteditable が選択時に無効になります

しかし、ファイアフォックスでは：

onmousedown は onclick 時に contenteditable を無効にするため、contenteditable 内に入力することはできません (私は思います)。

修正を手伝ってもらえますか? これに対するクロスブラウザソリューションを探しています。お願いします

4

1 に答える 1

0

答えは思ったよりも簡単に見えました。メインを含む親には contenteditable=true が必要です。この後、すべてのブラウザーですべてが正常に機能しました。また、selectstart をシミュレートする mousemove と mousedown も正常に機能するようになりました (このプロジェクトの別の機能)。同様の問題が発生した場合は覚えておいてください:

<!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 に答える