3

ページに contenteditable ul が必要です。ただし、Internet Explorer 10 でクリックし、右クリック メニューまたは CTRL+A ですべて選択してから削除すると、ul 要素がページから削除されます。

これを防ぐ、または少なくともそれがいつ発生したかを検出して交換用の ul を挿入する最善の方法は何ですか?

4

1 に答える 1

3

削除キーとバックスペース キーをインターセプトし、手動で削除することをお勧めします。手順は次のとおりです。

  • 選択範囲を取得する
  • <ul>範囲の端が編集可能な要素の外側にある場合は、範囲の端が編集可能な要素内に収まるように調整します
  • 範囲を呼び出しdeleteContents()ます。

以下は IE <= 8 では機能しないことに注意してください。これらのブラウザをサポートする必要がある場合は、Rangyライブラリを使用できます。これは、少し単純化するためにも使用できますdeleteSelectedContent()。

デモ: http://jsfiddle.net/timdown/STcXa/3/

コード：

var editor = document.getElementById("editor");

function deleteSelectedContent() {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            var editorRange = range.cloneRange();
            editorRange.selectNodeContents(editor);

            // Adjust selection range boundaries
            if (range.compareBoundaryPoints(Range.START_TO_START, editorRange) == -1) {
                range.setStart(editorRange.startContainer, editorRange.startOffset);
            }
            if (range.compareBoundaryPoints(Range.END_TO_END, editorRange) == 1) {
                range.setEnd(editorRange.endContainer, editorRange.endOffset);
            }

            range.deleteContents();
        }
    }
}

editor.addEventListener("keydown", function(evt) {
    if (window.getSelection &&
            !window.getSelection().isCollapsed &&
            (evt.keyCode == 8 || evt.keyCode == 46)) {
        evt.preventDefault();
        deleteSelectedContent();
    }
}, false);
于 2013-08-13T23:32:04.363 に答える