如何判断用户是否正在为 contentEditable 元素进行内容编辑

Question

我有一堆元素。如果您单击一个元素，它会突出显示它，以便您可以做一些事情。如果在突出显示某个元素时单击 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>

Answer 1

如果我当前正在编辑该元素，我不希望它删除该元素 通过 contentEditable 元素。

如果我理解正确，您可以使用document 定义该事件，而不是使用contenteditable。

您可以通过e.target 属性在按下按钮时捕捉目标元素。

let elem = document.getElementById("elem");

document.onkeydown = function (e) {
  if (e.target !== elem && 
     (e.key.toLowerCase() === "delete" || e.key.toLowerCase() === "backspace")) {
    elem.remove();
  }
};

<div id = "host" style="display:inline">
  <span>Item:</span>
  <div id="elem" style="border:black solid 1px;" contenteditable="true">Edit Me...</div>
</div>

---

更新：

elem.style.border = "black solid 1px";
elem.innerHTML = "Edit Me...";
elem.onclick = function(){
    this.focus();
    this.style.border = "blue solid 5px";
    this.contentEditable = true;
}
elem.onblur = function(){
    this.style.border = "black solid 1px";
    this.contentEditable = false;
    host.classList.remove("editing");
}
elem.onkeydown = function () {
    host.classList.add("editing");
};
document.onkeydown = function (e) {
  if (elem.getAttribute("contentEditable") && !host.classList.contains("editing") &&
  (e.key.toLowerCase() === "delete" || e.key.toLowerCase() === "backspace")) {
    elem.remove();
  }
};

<div id = "host" style="display:inline">
  <span>Item:</span>
  <div id="elem">Edit Me...</div>
</div>

Answer 2

你好沮丧的程序员，我只是对你的代码做了一些小的改动。

1. 我向文档添加了一个单击事件侦听器（以捕获所有按键）而不是主机 div。

2. 我做的另一件事是对元素引入类添加和删除，并根据类名决定是否删除元素。

3. 您还可以设置内容仅在之前已经点击过此 div 时才可编辑，否则将此点击视为首次点击。

希望这个解释有帮助！

let host = document.getElementById("host");
let elems = 0;
let addElem = function() {
  elems++;
  let elem = document.createElement('div');
  elem.id = "ElemId" + elems;
  elem.classList.add('normal');
  elem.innerHTML = "Edit Me...";
  elem.onclick = function() {
    if (selectedElem && selectedElem.id !== this.id) selectedElem.onblur();
    selectedElem = this;
    if (this.classList.contains('highlightDiv')) {
      this.contentEditable = true;
      this.focus();
    } else {
      this.classList.add('highlightDiv');
      this.classList.remove('normal');
      this.contentEditable = false;
    }
  }
  elem.onblur = function() {
    //if(selectedElem.id === this.id) selectedElem = null;      
    this.classList.remove('highlightDiv');
    this.classList.add('normal');
    this.contentEditable = false;
  }
  host.appendChild(elem);
}
addElem();
addElem();
document.getElementById("add").onclick = addElem;
let selectedElem = null;
//host.onkeydown = deleteText; this is not listening to keyinputs :(
document.onkeydown = deleteText;

function deleteText(e) {
  if (e.key.toLowerCase() === "delete" || e.key.toLowerCase() === "backspace") {
    //debugger; only for debugging in developer tools
    if (selectedElem && selectedElem.contentEditable === 'false' &&
      selectedElem.classList.contains('highlightDiv')) {
      //all criteria met delete the element
      selectedElem.remove();
    }
  }
}

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

.highlightDiv {
  border: blue solid 5px;
}

.normal {
  border: black solid 1px;
}

<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>