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
    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 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
    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. 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. 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 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. 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 . 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. el 19 feb. 2016 a las 1:52
  • 2
    Los 3 estuvimos errados :D:D:D el 19 feb. 2016 a las 2:04

Tu Respuesta

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

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