immutable div within a div content-editable



I would like to make a div that would be totally unmodifiable , preferably, inseleccionable and unfocusable even if it is within an element that have the contentEditable attribute enabled.

Note: I can not choose to put the div outside and position it with absolute position, because I need to position it relative to the upper container.


At the moment I have tried with the modern property pointer-events , but moving the arrows can make fun. So as a patch I tried to change the text back to its original value programmatically.

var modificadoporcodigo = false;
$('#encabezado').bind("DOMSubtreeModified", function() {
  if (e.keyCode == 46 || e.keyCode == 46) {
    alert('Lo sentimos, los encabezados no se pueden borrar');
  if (modificadoporcodigo) {
    modificadoporcodigo = false;
  } else {
    modificadoporcodigo = true;
#encabezado {
  color: gray;
  position: absolute;
  top: 27px;
  pointer-events: none;
<script src=""></script>
<div id="fondoCuerpo" class="col col-md-12">
  <div class="Hojas" contentEditable="true">
    <div id="encabezado">Prueba</div>
    Hola Mundo!
asked by Ruslan López 18.02.2016 в 19:59

1 answer


Using the property with CSS3:

.no-seleccionable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;

Although this is not for all browsers and what you want is something that requires testing in all having many solutions.

Only with CSS you can do what you want. Maybe if you put the content in the title attribute and then show it with CSS2+ you could also.


.no-seleccionable:before {
  content: attr(title)": ";
  position: absolute;
  margin-left: 50%;
<div contentEditable="true" class="no-seleccionable" title="tu texto aqui">
  Hola Mundo
answered by 18.02.2016 / 20:49