Question

我试图在'contenteditable'div中使span标记不可删除：

<div contenteditable>Editable <span contenteditable="false">Read Only</span></div>

只读范围确实是只读的，但我可以通过单个删除按钮删除整个范围。是否有一种属性方式来告诉跨度它不可删除？

Answer 1

制作div position: relative和范围position: absolute。这会占用正常文档流之外的范围，仍然在div内部，但无法更改或删除：

＆＃13;

div[contenteditable] {
  position: relative;
}
div[contenteditable] span {
  position: absolute;
  margin-left: 1em;
}

＆＃13;

<div contenteditable>Editable <span contenteditable="false">Read only - Can't touch this </span></div>

＆＃13;

Answer 2

...仍然允许我删除范围（但不能编辑它）。

单独通过contenteditable属性无法实现此目的。它按预期工作。 contenteditable属性执行它所说的内容：它允许某人编辑元素的内容。

考虑一个带有果酱的罐子，在一个盒子里面说你可以改变盒子的内容。罐子上有一个标签，上面写着“你可能不会更换这个罐子里的果酱”。此规则并不禁止您将所述jar扔进垃圾桶，因为您实际上从未实际更改过jar的内容。

我建议，像Noel Widmer那样，你试图找到解决问题的另一种方法。如果你能提供一个高保真的例子，我们可能会建议一些替代方案。

Answer 3

所以我为我找到了最好的解决方案，非常简单。不需要内容可编辑的div。只是一些内容可编辑的跨度。

            <div>
                <span contenteditable="true">
                    Editable text here.
                </span>
                <span contenteditable="false" style="font-weight: bold">
                    READ ONLY VALUES
                </span>
                <span contenteditable="true">
                    Edit more stuff here 
                </span>
             </div>

Answer 4

你正在使用jquery吗？在点击范围上使用此代码：

$(this).click(function(){

$（＆＃39;跨度＆＃39）。除去（）; }）;

如何使span标记不可删除？

4 个答案: