当一个元素是contentEditable
时,它的子元素可以被删除。如果其中一个子元素不是 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>
最佳答案
如果你会使用类,那会很容易。
<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>
关于javascript - 当父元素是 contentEditable 时,是否可以防止子元素被删除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52349018/