immutable div within a div content-editable

Question

immutable div within a div content-editable

Navigation

#1 by (3 votes)

3

Approach

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.

Attempts

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() {
  /*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>

javascript jquery html5 css

asked by Ruslan López 18.02.2016 в 19:59

source

1 answer

Structure for project in Django [closed] Do not allow access to defaultUrl in web.config file

score 3 · Accepted 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.

Note:

.no-seleccionable:before {
  content: attr(title)": ";
  position: absolute;
  margin-left: 50%;
}

<div contentEditable="true" class="no-seleccionable" title="tu texto aqui">
  Hola Mundo
</div>