web-dev-qa-db-fra.com

contenteditable = false à l'intérieur de contenteditable = true le bloc est toujours modifiable dans IE8

J'ai le HTML suivant pour m'assurer que le span interne n'est pas modifiable. Cela fonctionne dans d'autres navigateurs mais pas dans IE8.

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="false">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Voici un JSFiddle pour illustrer ce point (utilisez IE8 pour le tester): http://jsfiddle.net/haxhia/uUKPA/3/ .

Comment puis-je m'assurer que IE8 traite également cela correctement?

htmlinternet-explorer-8contenteditable
31
Gezim

D'accord, j'ai déjà découvert la réponse un peu comme comment la pénicilline a été découverte .

Vous voyez, en jouant avec ce code, j'ai défini par erreur contenteditable sur true pour le span et voilà! Ça a marché!

Donc, pour rendre un span NON-contenteditable à l'intérieur d'un div contenteditable, il vous suffit de définir son attribut contenteditable sur true!

<div contenteditable="true">
  Luke, I am your father.
  <span contenteditable="true">I'm your son?! Ewww!</span>
  Don't speak back to me!
</div>

Voici le fichier à démontrer (utilisez IE8 pour l'ouvrir): https://codepen.io/hgezim/pen/qMppLg .

Enfin, je n'ai pas posté la question pour obtenir des votes (même si cela ne ferait pas de mal!), Mais comme la solution était tellement ridicule et que je ne l'ai pas trouvée ici, j'ai pensé que quelqu'un pourrait trouver cette astuce pour gagner du temps.

35
Gezim

Le problème avec contenteditable = "true" inside contenteditable = "true" (pour le rendre non modifiable) sur IE est que le double-clic sur l'élément interne le rend modifiable

Solution

Grandparent tag as contenteditable true

Parent tag as contenteditable false

Child tag as contenteditable false

le contenu de la balise enfant ne sera pas modifiable à coup sûr

    <ul contenteditable="true">
        <li>By default, this content is editable via its 
        inherited parent elements value.</li>

    <li contenteditable="false" ><span contenteditable="false">This content is     
    <b>not</b> 
    editable for sure</span></li>
    </ul>

exemple JSFiddle

18
Alexvx

J'étais coincé avec le même problème aujourd'hui et après avoir essayé pendant un moment, j'ai trouvé une solution qui fonctionne pour moi sur IE. Ajoutez un écouteur d'événement de clic à l'élément contenteditable enfant. Dans le gestionnaire d'événements, procédez comme ci-dessous

 document.querySelector('.simulated-icon').addEventListener('click', function(evt){
    evt.stopPropogation;
    evt.preventDefault;
    return false;
 });
 
 
<div class="simulated-icon"><span>Icon text</span></div>

Comme vous pouvez le voir ici, renvoyer false sur l'écouteur d'événement de clic pour le contenu enfant modifiable indique IE de ne pas autoriser la modification. Cela fonctionne s'il y a un événement de clic sur le nœud parent et nous vérifions si le nœud enfant cible est cliqué dans l'écouteur d'événements. Bonne chance.

1
Chetan Chandrashekar