我使用内容可编辑div作为编辑器进行实时协作。我需要在客户端为每个用户绘制插入符/游标。我这样做是通过添加和删除每个事件上的跨度,如按键和单击。
<span id="caret1" style="fontSize:18px color:red">|</span>
如何使此跨度不可编辑?因此,当用户将其插入符号保持在一个恒定位置而另一个用户在同一位置编辑某些内容时,他无法通过退格键删除此插入符号或选择它并将其编辑为就像文本一样。
编辑:
<span id="caret1" style="fontSize:18px color:red" contenteditable=false>|</span>
不允许用户至少在跨区中写入,但用户仍然可以通过退格键删除此跨度。
答案 0 :(得分:0)
一些事情
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')对删除/退格进行验证......