Planteamiento
Quisiera hacer un div
que fuera totalmente inmodificable, de preferencia, inseleccionable e inenfocable incluso si se encuentra dentro de un elemento que tenga habilitado el atributo contentEditable
.
Nota: No puedo optar por poner el div fuera y posicionarlo con posición absoluta, debido a que necesito posicionarlo en forma relativa al contenedor superior.
Intentos
De momento he intentado con la moderna propiedad pointer-events
, pero moviendo las flechas se puede burlar.
Así que como parche he intentado que al modificar el texto regrese a su valor original programáticamente.
var modificadoporcodigo = false;
$('#encabezado').bind("DOMSubtreeModified", function() {
/*console.log(e.which);
if (e.keyCode == 46 || e.keyCode == 46) {
alert('Lo sentimos, los encabezados no se pueden borrar');
}*/
if (modificadoporcodigo) {
modificadoporcodigo = false;
} else {
$('#encabezado').text('Prueba');
modificadoporcodigo = true;
}
});
#encabezado {
color: gray;
position: absolute;
top: 27px;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fondoCuerpo" class="col col-md-12">
<div class="Hojas" contentEditable="true">
<div id="encabezado">Prueba</div>
Hola Mundo!
</div>
</div>