Contenteditable:防止内部元素被删除
Contenteditable:防止内部元素被删除
提问于 2016-12-01 09:55:41
我有一个简单的可内容编辑的标记：
<div class="example" contenteditable="true">
<div class="inside">Some content</div>
</div>当我删除“div”时，class="inside" Some content也会被删除。当内容被删除时，有没有一种方法可以防止内部div被删除？
例如，一旦内容被删除，这就是我想做的样子。
<div class="example" contenteditable="true">
<div class="inside"></div> <!-- The div is not deleted -->
</div>我环顾四周，但似乎没有明确的答案。
任何帮助都将不胜感激。
谢谢你。
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-12-01 10:13:59
.inside, .example {
display: inline;
}<div class="example" contenteditable="true">
<div class="inside">Some content</div>
</div>
也许有一种样式是内联级元素。
因为当您删除内容时，宽度将为0%。您不能再次单击它或添加任何内容。
因此，我的解决方案是
.inside, .example {
display: block;
}如果需要，可以指定宽度。:)
.inside, .example {
display: block;
}<div class="example" contenteditable="true">
<div class="inside">Some content</div>
</div>
Stack Overflow用户
发布于 2020-12-11 01:51:16
这可能会对某些人有帮助
function onpaste(e: ClipboardEvent) {
e.preventDefault();
const selection = window.getSelection();
// Don't allow deleting nodes
if (selection.anchorNode.isSameNode(selection.focusNode)) {
// get text representation of clipboard
const text = e.clipboardData.getData("text/plain");
// insert text manually, but without new line characters as can't support <br/>s yet
document.execCommand("insertHTML", false, text.replace(/\n/g, ""));
}
}
function onkeydownInEditable(e: KeyboardEvent) {
if (e.key === "Enter") {
e.preventDefault();
}
if (e.key === "Backspace" || e.key === "Delete" || e.key === "Paste") {
const selection = window.getSelection();
// Don't allow deleting nodes
if (!selection.anchorNode.isSameNode(selection.focusNode))
e.preventDefault();
}
}
elementEditing.addEventListener("keydown", onkeydownInEditable);
elementEditing.addEventListener("paste", onpaste);Stack Overflow用户
发布于 2020-12-26 23:56:24
const example = document.querySelector(".example")
example.addEventListener("keydown", (e) => {
if (e.keyCode == 8 || e.keyCode == 46) { // delete and del keys
if (example.children.length === 1) { // last inner element
if (example.children[0].innerText < 1) { // last element is empty
e.preventDefault()
}
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40901365
复制相关文章
相似问题
腾讯云开发者
