如何判断用户是否正在对contentEditable元素进行contentEditing

问题描述

我有一堆元素。如果单击某个元素，它将突出显示该元素，以便您可以进行操作。如果在突出显示元素时单击Delete / Backspace键，则该元素将被删除。但是，如果我当前正在通过contentEditable编辑元素，则我不希望它删除该元素。

我想到了：

element.oninput = function(){editing = true};
element.onchange = function(){editing = false};

但是如果它们以退格/删除开头，它将在editing设置为true之前删除该元素。

演示问题：

let host = document.getElementById("host");
let elems = 0;
let addElem = function(){
    elems++;
    let elem = document.createElement('div');
    elem.id = "ElemId"+elems;
    elem.style.border = "black solid 1px";
    elem.innerHTML = "Edit Me...";
    elem.onclick = function(){
        if(selectedElem && selectedElem.id !== this.id) selectedElem.onblur();
        selectedElem = this;
        this.focus();
        this.style.border = "blue solid 5px";
        this.contentEditable = true;
    }
    elem.onblur = function(){
        if(selectedElem.id === this.id) selectedElem = null;
        this.style.border = "black solid 1px";
        this.contentEditable = false;
    }
    host.appendChild(elem);
}
addElem();
addElem();
document.getElementById("add").onclick = addElem;
let selectedElem = null;
host.onkeydown = function(e){
    if(e.key.toLowerCase() === "delete" || e.key.toLowerCase() === "backspace"){
        if(selectedElem){
            selectedElem.remove();
        }
    }
}

.item{
background-color:grey; 
font-family:sans-serif;
}

<div id = "host">
  <p>Click an element. It now is <span style="border: blue 2px solid;">highlighted</span>. if you click <span class="item">Delete</span> or <span class="item">Backspace</span>,it's supposed to delete the item. (This is functional).<br>Click again after it's highlighted and it allows you to edit it. <span style="font-weight:bold;">While editing</span> it's not supposed to be able to delete.</p>
    <button id="add">Add Item:</button>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）