entityMap|blocks|key|cs8su|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ce092|.inside,+.example+{
++display:+inline;
}|code-block|syntax|javascript|bhr0v|<div+class="example"+contenteditable="true">
++<div+class="inside">Some+content</div>
</div>|edn62|3viem|也许有一种样式是内联级元素。|beb3|因为当您删除内容时，宽度将为0%25。您不能再次单击它或添加任何内容。|1opv3|因此，我的解决方案是|5rf77|.inside,+.example+{
++display:+block;
}|1qu1t|如果需要，可以指定宽度。:)|djh44|7k4bt|.inside,+.example+{
++display:+block;
}|6ttqu|<div+class="example"+contenteditable="true">
++<div+class="inside">Some+content</div>
</div>|2ni97|85ld1^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|11|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|12|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|E|8|13|9|@]|A|@]|B|$F|G]]|$2|J|4|5|6|7|8|14|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|15|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|16|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|17|9|@]|A|@]|B|$]]|$2|Q|4|R|6|E|8|18|9|@]|A|@]|B|$F|G]]|$2|S|4|T|6|7|8|19|9|@]|A|@]|B|$]]|$2|U|4|5|6|7|8|1A|9|@]|A|@]|B|$]]|$2|V|4|W|6|E|8|1B|9|@]|A|@]|B|$F|G]]|$2|X|4|Y|6|E|8|1C|9|@]|A|@]|B|$F|G]]|$2|Z|4|5|6|7|8|1D|9|@]|A|@]|B|$]]|$2|10|4|-4|6|7|8|1E|9|@]|A|@]|B|$]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.inside, .example {
  display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="example" contenteditable="true"&gt;
  &lt;div class="inside"&gt;Some content&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Maybe there's a style that is inline-level element.</p>

<p>Since the width will be 0% when you remove the content. You cannot click it again or add any content.</p>

<p>So, my solution will be</p>

<pre><code>.inside, .example {
  display: block;
}
</code></pre>

<p>You can specify width if you want. :)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.inside, .example {
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="example" contenteditable="true"&gt;
  &lt;div class="inside"&gt;Some content&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|4f9ed|text|您必须将contenteditable="true"添加到内部元素：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|9mbfo|<div+class="example">
+++++<div+class="inside"+contenteditable="true">Some+content</div>
+++++<div+class="inside">Some+content</div>+
+++++<div+class="inside"+contenteditable="true">Some+content</div>
</div>|code-block|syntax|javascript|d7u3e^0|4|M|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|M|9|@$A|N|B|O|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|P|9|@]|E|@]|F|$J|K]]|$2|L|4|-4|6|7|8|Q|9|@]|E|@]|F|$]]]]

<p>You have to add <code>contenteditable="true"</code> to inside elements:</p>

<pre><code>&lt;div class="example"&gt;
     &lt;div class="inside" contenteditable="true"&gt;Some content&lt;/div&gt;
     &lt;div class="inside"&gt;Some content&lt;/div&gt; &lt;!-- This one will not be deleted --&gt;
     &lt;div class="inside" contenteditable="true"&gt;Some content&lt;/div&gt;
&lt;/div&gt;
</code></pre>


entityMap|blocks|key|5g35o|text|这可能会对某些人有帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fc9fq|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"+%7C%7C+e.key+===+"Delete"+%7C%7C+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);|code-block|syntax|javascript|br5r3^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>This might help someone</p>
<pre><code>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(&quot;text/plain&quot;);

    // insert text manually, but without new line characters as can't support &lt;br/&gt;s yet
    document.execCommand(&quot;insertHTML&quot;, false, text.replace(/\n/g, &quot;&quot;));
  }
}

function onkeydownInEditable(e: KeyboardEvent) {
  if (e.key === &quot;Enter&quot;) {
    e.preventDefault();
  }
  if (e.key === &quot;Backspace&quot; || e.key === &quot;Delete&quot; || e.key === &quot;Paste&quot;) {
    const selection = window.getSelection();
    // Don't allow deleting nodes
    if (!selection.anchorNode.isSameNode(selection.focusNode))
      e.preventDefault();
  }
}

 elementEditing.addEventListener(&quot;keydown&quot;, onkeydownInEditable);
 elementEditing.addEventListener(&quot;paste&quot;, onpaste);
</code></pre>


entityMap|blocks|key|d18jd|text|const+example+=+document.querySelector(".example")

example.addEventListener("keydown",+(e)+=>+{
+if+(e.keyCode+==+8+%7C%7C+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()
+++++}
+++}+
+})|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|6ag0r|unstyled^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$C|D]]|$2|E|4|-4|6|F|8|H|9|@]|A|@]|B|$]]]]

<pre><code>const example = document.querySelector(&quot;.example&quot;)

example.addEventListener(&quot;keydown&quot;, (e) =&gt; {
 if (e.keyCode == 8 || e.keyCode == 46) { // delete and del keys
   if (example.children.length === 1) { // last inner element 
     if (example.children[0].innerText &lt; 1) { // last element is empty
       e.preventDefault()
     }
   } 
 })
</code></pre>


<p>I have a simple contenteditable markup:</p>

<pre><code>&lt;div class="example" contenteditable="true"&gt;
     &lt;div class="inside"&gt;Some content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>When I delete the "<code>Some content</code>", then <code>class="inside"</code> div also gets deleted. Is there a way to prevent the inside div from being removed when contents are deleted?</p>

<p>For example, this is the look I am trying to make once the contents are deleted.</p>

<pre><code>&lt;div class="example" contenteditable="true"&gt;
     &lt;div class="inside"&gt;&lt;/div&gt; &lt;!-- The div is not deleted --&gt;
&lt;/div&gt;
</code></pre>

<p>I looked around but doesn't seem like there is a clear answer.</p>

<p>Any help will be much appreciated.</p>

<p>Thank you.</p>


Contenteditable: prevent inner element from being deleted

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我有一个简单的可内容编辑的标记： <div class="example" contenteditable="true">     <div class="inside">Some content</div></div> 当我删除“div”时，class="inside" Some content也会被删除。当内容被...

问Contenteditable:防止内部元素被删除
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Contenteditable:防止内部元素被删除EN