html - react - contenteditable=false à l'intérieur contenteditable=le bloc true est encore modifiable dans IE8
react contenteditable (2)
J'ai le code HTML suivant pour vérifier que la 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 le point (utilisez IE8 pour le tester): http://jsfiddle.net/haxhia/uUKPA/3/ .
Comment puis-je m'assurer que IE8 le traite également correctement?
D'accord, j'ai déjà découvert la réponse, un peu comme la découverte de la pénicilline .
Vous voyez, en jouant avec ce code, j'ai par erreur défini contenteditable
à true
pour le span
et le tour est joué! Ça a marché!
Donc, pour rendre un span
non-contenteditable dans un div contenteditable, vous devez simplement 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://www.dropbox.com/s/2yc3rrtkji3rupr/contenteditableIE8.html .
Enfin, je n'ai pas posté la question pour obtenir des votes (même si cela ne fait pas de mal!), Mais comme la solution était tellement ridicule et que je ne l'ai pas trouvée ici, je pensais que quelqu'un pourrait trouver cette astuce.
Le problème avec contenteditable = "true" dans contenteditable = "true" (pour le rendre non modifiable) sur IE est que le double-clic sur l'élément interne le rend éditable
Solution
Grandparent tag as contenteditable true
Parent tag as contenteditable false
Child tag as contenteditable false
le contenu de la balise child 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>