首页 > 编程语言> 文章详细

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

2019-11-22 23:34:52 阅读：280 来源： 互联网

标签：html5 contenteditable html javascript jquery

我想在页面上有一个contenteditable ul.但是,在Internet Explorer 10中,如果单击它,请用右键单击菜单或CTRL A选择全部,然后删除,ul元素将从页面上删除.

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

解决方法:

我建议拦截Delete和Backspace键,然后手动进行删除.这些步骤是：

>获取所选范围
>调整范围的末端以使其位于可编辑的< 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);

标签：html5,contenteditable,html,javascript,jquery
来源： https://codeday.me/bug/20191122/2063425.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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