javascript - 有没有办法制作不可编辑的跨度？

Question

我正在使用内容可编辑的 div 作为实时协作目的的编辑器。我需要在客户端为每个用户绘制插入符号/光标。我通过在每个事件(如按键和单击)上添加和删除跨度来做到这一点。

<span id="caret1" style="fontSize:18px color:red">|</span> 

如何使这个跨度不可编辑？因此，当用户将他的插入符号留在固定位置而另一个用户在同一位置编辑某些内容时，他无法通过退格键删除此插入符号或选择它并像编辑文本一样编辑它。

编辑:

<span id="caret1" style="fontSize:18px color:red" contenteditable=false>|</span> 

至少不允许用户在 span 中写入，但用户仍然可以通过退格键删除该 span。

Answer 1

一些事情

1) 您的源代码格式不正确。双引号太多。

"fontSize:18px" color:red"

2) 另一件事是我还没有看到 contentEditable 是一种真正的样式，我看到它在实际中更像是一个伪类(在 CSS 文件中被引用)或 html 标签的属性，而不是一种样式本身。

<span id="caret1" contentEditable="true" style="">

3) 如果这些都不起作用，您可以尝试使用 javascript/jquery 方法删除或退格到两个光标相互重叠的位置。您可以将两个 ID 添加到同一跨度。

`<span id="caret1 caret2" style="fontSize:18px" contenteditable:"false" color:"red">|</span> `

当 caret2 做一些不同的事情时，移出 caret1，并为 caret2 创建一个新的......

要做到这一点，您可以使用一些脚本(并且可能使用类似 rangyInputs 的东西)，并确定所选文本中是否有另一个插入符号...并使用一些 .on('keypress ') 对删除/退格进行验证...