How can I make a span tag un-deletable?

Question

I'm attempting to make a span tag un-deletable inside a 'contenteditable' div:

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

The read only span is indeed read only, but I can delete the whole span with a single delete press. Is there an attribute way to tell the span that it is not deletable?

You are probably forced to this using js or jquery. Find all elems that are editable and store their non-editable text. After each edit you check if the non-edit text is still inside the control and if it is not you'll have to set it again. — Noel Widmer, May 21 '15 at 12:21
@divy3993 When I say 'div contenteditable' It responds like a textarea. I've put a span in there so it's content is false meaning I can't edit it (i.e 'Read Only'). But, because the whole div is contenteditable I can edit/delete inside html. I'm trying to make this specific span untouched. — Alon Weissfeld, May 21 '15 at 12:23
How are you making it behave like a textarea? Post that code because that is where youll have to implement this. — Brad C, May 21 '15 at 12:40
@br4d.net It's a feature that is supported by almost all browsers: http://caniuse.com/#feat=contenteditable — Martin Braun, May 21 '15 at 12:56
I don't think this is possible without some javascript hackery. Even the best solution provided so far still lets me delete the span (but not edit it). You might be able to write a script that replaces it when it is deleted or intercepts key presses. — Brad C, May 21 '15 at 13:05

misterManSam · Answer 1 · 2015-05-21T12:55:48.490

3

Make the div position: relative and the span position: absolute. This takes the span outside the normal document flow, still inside the div, but unable to be altered or removed:

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

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

edited May 21 '15 at 12:55

answered May 21 '15 at 12:50

misterManSam

24,303
11
69
89

But the problem is that if I add more editables after the read only span it contradict the read only. – Alon Weissfeld May 21 '15 at 13:29
@AlonWeissfeld - I'm not quite sure what you mean... could you make an example? – misterManSam May 21 '15 at 23:23
Editable Read only - Can't touch this more stuff here 'More stuff here' will clash the read only values since the read only span position is absolute and does not affect the spacing that should after. – Alon Weissfeld May 22 '15 at 00:15
Cool, I didn't know about `contenteditable="false"`, me likey – Offir Jul 27 '21 at 10:52

score 3 · Accepted Answer · answered May 23 '15 at 10:42

So I figured out the best solution for me, very simple. A content editable div in not needed. Just a a few content editable spans.

            <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>

score 1 · Answer 3 · answered May 21 '15 at 13:47

1

…still lets me delete the span (but not edit it).

You can't achieve this via the contenteditable attribute alone. It is working as intended. The contenteditable attribute does what it says: it allows someone to edit the content of the element.

Consider a jar with jam, inside a box which says you can change the content of the box. The jar has a label which says "you may not change the jam in this jar". This rule does not forbid you from throwing said jar into the trashcan because you never actually change the content of the jar by doing so.

I suggest, like Noel Widmer did, that you try to find another solution to your problem. If you can provide a high fidelity example we might suggest some alternatives.

answered May 21 '15 at 13:47

Niklas Brunberg

769
7
17

In the end, the goal is to make a widget that has some value that cannot be changed. It can be an input, textarea, or whatever. For a clearer example: If the untouched value is set to "Danny", I would set a placeholder "This kid is named Danny, He likes apples". This should be represented in a widget so I can edit everything except the value I passed as read only (Danny). I've tried doing it with jQuery but this get's very complicated to overcome all the cases of keypress types. Any suggestion would be great – Alon Weissfeld May 22 '15 at 00:22
I created a jQuery UI demo. You could of course do this without the entire UI library though. [See fiddle](https://jsfiddle.net/NiklasBr/fcv4afd5/). This demo does not allow nested elements but I hope it gives you an idea to work from. – Niklas Brunberg May 22 '15 at 10:12

score 0 · Answer 4 · answered May 21 '15 at 12:30

0

are you using jquery. use this code on click span :

$(this).click(function(){

$('span').remove(); });

answered May 21 '15 at 12:30

Mukesh Prajapat

274
2
13

How can I make a span tag un-deletable?

4 Answers4

Linked