3

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>

6
  • 2
    Solo para satisfacer mi curiosidad, porque necesitas hacer eso?
    – jasilva
    Commented el 18 feb. 2016 a las 19:19
  • @jasilva para poner texto de margen en cada hoja de un editor html5 :) PD: el que hace las preguntas soy yo.. ok no :P Commented el 18 feb. 2016 a las 21:37
  • @RuslanLópezCarro es que en si la pregunta es interesante, pero no me imaginaba un caso "de la vida real" ;)
    – jasilva
    Commented el 18 feb. 2016 a las 21:39
  • @rnrneverdies si le sirve de información para responder la pregunta, es una aplicación pensada para que la usen abogados, así que dudo que intenten ver el código fuente de la página o abrir el inspector. Saludos. Commented el 18 feb. 2016 a las 22:15
  • No me parece necesario borrar, ya que c/u es libre de comentar como le parezca, pero SI se puede ocultar con la posibilidad de que el usuario lo lea o no, mejor. Commented el 19 feb. 2016 a las 1:46

1 respuesta 1

3

Usando la propiedad con 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;
}

Aunque esto no es para todos los navegadores y lo que quieres es algo que requiere probarse en todas habiendo muchas soluciones.

Solo con CSS podrás lo que quieres. Quizás si el contenido lo pongas en el atributo title para luego mostrarlo con CSS2+ se pudiera también.

Observa:

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

15
  • No me sirvió, pero gracias por tu tiempo. En chrome que es el navegador que más me importa, -webkit-user-select se puede bypassear simplemente moviendo las teclas y escribiendo dentro. Modificar el contenido antes del elemento es mucho más sensato, pero produce algunos problemas cuando tienes div de pié de página y div de encabezado, en concreto se puede borrar el pie, y si le intentas mucho, al borrar el texto tu cursor se pasa al div de encabezado haciendo que el texto se encime junto después. postimg.org/image/yglopqngb Commented el 18 feb. 2016 a las 22:05
  • 1
    @RuslanLópezCarro fíjate en el snippet, al parecer hace lo que quieres. ni se puede seleccionar ni se puede modificar. Commented el 19 feb. 2016 a las 0:56
  • @rnrneverdies Su amable edición destructiva resolvió el problema, al señor James le había entendido al leer en órden las preguntas que su aporte era hacer no editable el contenido interno, debería volver su edición otra respuesta agregándole position:absolute y margin-left:50%, pues mediante :before y :after pude hacer encabezado y pie de página fácilmente como puede apreciar en la imágen: postimg.org/image/6z99hq6ud . Commented el 19 feb. 2016 a las 1:50
  • @RuslanLópezCarro, de tu ejemplo anterior: <div id="encabezado">Prueba</div> Prueba con <div id="encabezado" class="no-seleccionable" title="Prueba"></div> Con eso, no se puede seleccionar y usa las 2 clases definidas arriba. Commented el 19 feb. 2016 a las 1:52
  • 2
    Los 3 estuvimos errados :D:D:D Commented el 19 feb. 2016 a las 2:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.