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

嗨，沮丧的程序员，我对您的代码做了一些小的改动。

我在文档中添加了一个单击事件侦听器（以捕获所有按键），而不是主机div。
我所做的另一件事是向类元素添加类和删除类，并根据类名称决定是否删除该元素。
还可以将内容设置为仅在之前已单击此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>

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

2 个答案: