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>←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?
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.
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.
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.
This question already has answers here:$('p[contenteditable]'). keyup(function(e) { return e. which !== 13 });
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With