Question

我将根div设置为contenteditable，它包含许多img和video元素。因此，当用户编辑它并按退格键删除一个元素时，如何获取用户删除的那个元素并获取已删除元素的属性值？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/Events/input

为事件input注册eventlistener。如果您需要IE支持，可以考虑使用keypress事件。

事件可能会在实际更改发生之前触发，keypress可能无法注册粘贴和剪切更改，因此您也希望处理这些事件（input也会激怒那些人。）

然后计算编辑前后的差异，分析它，然后你去。

Answer 2

如果您对已删除的元素及其属性感兴趣，一种方法是设置MutationObserver以跟踪对DOM的修改。它的回调提供了更改和受影响的元素以及其他用户信息。

(new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        if(mutation.type=='attributes')
            console.log('Element attributes may have changed, see record:',mutation);
        else
        if(mutation.type=='childList')
            console.log('Child nodes were modified, see record:',mutation,
                        'or removedNodes:',mutation.removedNodes);
});})).observe(document.getElementById('edit'),{
    subtree:true,
    attributes:true,
    childList:true,
    characterData:true,
    characterDataOldValue:true
});

小提琴：https://jsfiddle.net/0tdm1wwv/2/

在其他浏览器中也看一下，因为contenteditable有一些有趣的味道。

Answer 3

https://jsfiddle.net/814j80z2/

<html>
    <head>
        <script>
            var myContent = {
                currentList: [], //List since last time.
                initialList: [], //Starting list, just if we need it at some point.

                //Storing all current nested elements in currentList and initialList
                Init: function(){
                    var tRoot = document.getElementById('Contenteditable');
                    var tL = document.querySelectorAll('a, img'); //Or just all '*'.

                    for(var i=0, j=tL.length; i<j; i++){
                        this.currentList.push(tL[i]);
                        this.initialList.push(tL[i]);
                    }

                    if (!tRoot.oninput) tRoot.oninput = function(){myContent.onInput(this)} //Depending on your requirements use others.
                    if (!tRoot.onkeyup) tRoot.onkeyup = function(){myContent.onInput(this)} //Depending on your requirements use others.
                },

                //Comparing current nested elements with currentList and set new currentList
                checkChangedElements: function(e){
                    if (e){
                        var tE = []; //Storing the exceptions.
                        var tN = []; //Our new current list.
                        var tC = []; //Current elements:

                        var tL = document.querySelectorAll('a, img'); //Or just all '*'.
                        for(var i=0, j=tL.length; i<j; i++) tC.push(tL[i]);

                        for(var i=0, j=myContent.currentList.length; i<j; i++){
                            //if (tC.some(function(item){return item === myContent.currentList[i]}) tE.push(tL[i])
                            if (tC.indexOf(myContent.currentList[i]) === -1) tE.push(myContent.currentList[i])
                            else tN.push(myContent.currentList[i])
                        }

                        myContent.currentList = tN;
                        return tE;
                    }
                },

                //Our input function firing each two seconds
                onInput: function(e){
                    if (e){
                        if (e.inputTimer) clearTimeout(e.inputTimer); //We fire it after two seconds without any input
                        e.inputTimer = setTimeout(function(e){
                            var tL = myContent.checkChangedElements(e);
                            e.inputTimer = null;
                            console.log('Deleted elements: ', tL)
                        }.bind(undefined, e), 2000)
                    }
                }
            }
        </script>
    </head>

    <body onload = 'myContent.Init()'>
        <div contenteditable = 'true' id = 'Contenteditable'>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
            <a href = 'https://www.google.com/'>Google</a>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
            <a href = 'https://www.google.com/'>Google</a>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
            <a href = 'https://www.google.com/'>Google</a>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
        </div>
    </body>
</html>

编辑：为旧版IE添加onkeydown。

如何在contenteditable div中获取已删除的元素？

3 个答案: