Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

contenteditable=false in contenteditable=true

Problem:

I have observed an undesirable behaviour in Chrome and Opera that occurs when one joins two p tags by deleting the separation between them. Chrome and Opera delete contenteditable=false element(widget) and text after.

Example:

example on jsfiddle

html:

<div contenteditable="true" class="editor">
<p>This is the first paragraph.</p>
<p>&larr;Place your cursor here and press backspace. <span class="widget" contenteditable="false">widget</span> Text after widget</p> 
</div>

css:

.widget{
    display: inline-block;
    padding: 5px;
    background-color: gray;
}

.editor{
    font: 20px Trebuchet MS
}

Question:

Why? How fix it?

like image 678
user1103291 Avatar asked Feb 12 '14 02:02

user1103291


People also ask

What is false about Contenteditable attribute?

The contentEditable property of the HTMLElement interface specifies whether or not the element is editable. This enumerated attribute can have the following values: ' true ' indicates that the element is contenteditable . ' false ' indicates that the element cannot be edited.

What is Contenteditable true?

The contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

What does Contenteditable mean?

Definition and Usage The contenteditable attribute specifies whether the content of an element is editable or not. Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent.

How do I stop Enter key in Contenteditable?

This question already has answers here:$('p[contenteditable]'). keyup(function(e) { return e. which !== 13 });


1 Answers

I reported this bug long time ago for Blink and Webkit. It's kind of critical and there's no workaround. Webkit team tried to fix it, but as far as I can see, they introduced new bug ;|.

PS. Yes, this answer does not propose any fix, but the only fix is overriding delete and backspace keys behaviour.

like image 85
Reinmar Avatar answered Sep 16 '22 15:09

Reinmar