javascript - 如何防止在IE10中意外删除contenteditable ul？

Question

我想在页面上有一个 contenteditable ul。但是，在 Internet Explorer 10 中，如果您单击它，使用右键单击菜单或 CTRL+A 全选，然后删除，ul 元素将从页面中删除。

防止这种情况发生的最佳方法是什么，或者至少检测它何时发生并插入替换 ul？

Answer 1

我建议拦截删除键和退格键并手动进行删除。步骤是:

• 获取选择的范围
• 将范围的两端调整到可编辑范围内 <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);