Is there a way to make a non-editable span?

Question

I am using a content editable div as an editor for real-time collaboration purposes. I need to paint carets/cursors for each user on the client side. I am doing this by adding and removing a span on each event like keypress and click.

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

How can I make this span non-editable? So that when a user leaves his caret at a constant position and another user edits something in this same position, he can't delete this caret by backspace or select it and edit it as if it was text.

EDIT:

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

Doesn't let users write in the span at least but the users are still able to delete this span by backspace.

Answer 1

Couple of things

1) Your source code isn't formatted right. Too many double quotes.

"fontSize:18px" color:red"

2) The other thing is I haven't seen contentEditable as a true style, i've seen in action working more like a pseudoclass (being referenced in CSS files) or attribute to html tags, not as a style itself.

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

3) If neither of those work, you could try a javascript/jquery approach where deleting or backspacing to a point where there'd be two cursors on top of each other. you could add both ID's to the same span.

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

and when caret2 does something different, move out of caret1, and create a new for caret2...

To do that, you could use a little scripting (and maybe use something like rangyInputs ), and identify if the selected text has another caret in it... and also use a bit of that .on('keypress') to do validation on delete/backspace...