如何防止在IE10中意外删除contenteditable ul？答案

【问题标题】：How to prevent accidental deletion of contenteditable ul in IE10?如何防止在IE10中意外删除contenteditable ul？
【发布时间】：2013-08-13 19:26:05
【问题描述】：

我想在页面上有一个内容可编辑的 ul。但是，在 Internet Explorer 10 中，如果单击它，请使用右键单击菜单或 CTRL+A 选择全部，然后删除，ul 元素会从页面中删除。

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

【问题讨论】：

它发生在所有浏览器中，因为li 在 contenteditable 元素内，因此可编辑，因此可删除。
感谢您的回复。我知道lis 是可删除的。我遇到的问题是ul 本身被完全从页面上删除；它没有显示在 Inspect Element 中。在 Chrome 中，即使你删除了所有的lis，你仍然可以输入ul。

标签： javascript jquery html contenteditable

【解决方案1】：

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

获取所选范围
调整范围的末端，使其位于可编辑的<ul> 元素内（如果它们在外部）
在范围内致电deleteContents()。

请注意，以下内容不适用于 IE 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);

【讨论】：

结构的方式，使用退格或删除不会做任何事情，除非选择任何文本；防止从光标退格/删除。不过，这确实有帮助。如果我有足够的声誉，我会支持你。