javascript - 如何删除 contenteditable 元素的所有子元素？

Question

我需要在单击 Enter 后删除 div 的所有子级。下面有一个 div 和事件监听器。

<div id = "area" contenteditable="true"></div>

document.onreadystatechange = function(){
    if(document.readyState == 'complete'){
        document.getElementById("area").addEventListener("keypress" , public_mode);
}

function public_mode(){
    var key = window.event.keyCode;
      if (key == 13) {
         sendMessage();
    }
}

function sendMessage(){
    var area = document.getElementById("area");
    while (area.firstChild) {
        area.removeChild(area.firstChild);
    }
}

正如你所看到的，contenteditable 元素是根据点击 Enter 添加的元素 - 这取决于浏览器将添加什么元素。在我的例子中，我使用 chrome，这里插入了 div。因此，单击输入该区域但不删除

后的结果

<div id = "area" contenteditable = "true">
     Sckoriy
     <div></div>
</div>

并且，删除

<div id = "area" contenteditable = "true">
     <div></div>
     <div></div>
</div> 

但是，需要的结果是

 <div id = "area" contenteditable = "true">
     //Empty
 </div>

Answer 1

代码基本上可以工作，但是有两个主要问题。

• keyCode 已弃用。您应该使用 key 它将搜索键的语法转换为查找字符串。这意味着您只需检查 key 是否为 Enter，而不是 13。

• 其次，您需要将事件传递给 public_mode 函数，以便您可以读取事件发生时按下的key。您还需要使用 preventDefault 来防止它在检测到 Enter 时从原始 contentEditable 区域中删除所有内容后添加新行。 p>

document.onreadystatechange = function() {
  if (document.readyState == 'complete') {
    document.getElementById("area").addEventListener("keypress", public_mode);
  }

  function public_mode(event) {
    var key = event.key;
    if (key === "Enter") {
      event.preventDefault();
      sendMessage();
    }
  }

  function sendMessage() {
    var area = document.getElementById("area");
    while (area.firstChild) area.removeChild(area.firstChild);
  }
}

#area {
  min-width: 100vw;
  border: 1px solid black;
}

<div id="area" contenteditable="true"></div>