Question

当元素为contentEditable时，可以删除其子元素。如果这些子元素之一是 not contentEditable，则不能编辑该子元素的内容，但仍可以删除该元素本身。您可以在以下示例中看到这一点。

是否可以防止这些子元素被删除？

div {
  height: 100px;
  border: 1px solid #CCC;
  margin: 5px;
  padding: 5px;
  width: 300px;
}

span {
  color: #999;
}

<div contentEditable="true">Hello <span contentEditable="false">world</span>!</div>

Answer 1

如果可以使用类，那将很容易。

<div class="contentEditable">Hello <span class="contentNotEditable">world</span>!</div>
<div class="saveContent" style="display: none;"></div>

JavaScript / Jquery部分

<script>
$(".contentEditable").on("click",function(){
 // make blank .saveContent
 $(".saveContent").html("");

 // copy all contentNotEditable class which inside selected contentEditable class.
 $( this ).find(".contentNotEditable").clone().appendTo( ".saveContent" );

 // make blank contentEditable
 $( this ).html("");

 // clone contentNotEditable to contentEditable
 $( ".saveContent" ).find(".contentNotEditable").clone().appendTo( ".contentEditable" );
});
</script>

Answer 2

是否可以防止这些子元素被删除？

否，但这是替代解决方案。

演示：

由于我们不能有直子，所以我们需要创建两个单独的元素。

<div class="editor">
  <label class="editor-label">You can't remove me</label>
  <div class="editor-area" contentEditable="true"></div>
</div>

然后，我们从流程中删除 label ，以免对区域产生任何影响。

.editor {
  border: solid 1px #CCC;
  position: relative; // context for label
  line-height: 1.5;
}

.editor-area {
  min-height: 100px;
  padding: 5px;
}

.editor-label {
  position: absolute; // out of the flow
  padding: 5px 0 0 5px;
  user-select: none;
}

最后，要使插入号在 label 文本之后开始，我们需要知道其宽度并将其应用于 area 的text-indent值。

var editorLabel = document.querySelector('.editor-label');
var editorArea = document.querySelector('.editor-area');

var editorLabelRect = editorLabel.getBoundingClientRect();

editorArea.style.textIndent = editorLabelRect.width + 'px';
editorArea.innerHTML = '&nbsp';

完整代码：

var editorLabel = document.querySelector('.editor-label');
var editorArea = document.querySelector('.editor-area');

var editorLabelRect = editorLabel.getBoundingClientRect();

editorArea.style.textIndent = editorLabelRect.width + 'px';
editorArea.innerHTML = '&nbsp';

.editor {
  border: solid 1px #CCC;
  position: relative;
  line-height: 1.5;
}

.editor-area {
  min-height: 100px;
  padding: 5px;
}

.editor-label {
  position: absolute;
  margin: 5px 0 0 5px;
  user-select: none;
}

<div class="editor">
  <label class="editor-label">You can't remove me</label>
  <div class="editor-area" contentEditable="true"></div>
</div>

当子元素的父元素是contentEditable时，是否可以防止子元素被删除？

2 个答案:

演示：