JSFiddle: http://jsfiddle.net/p7ph5vfj/Typing über Spannweite fügt Phantom background-color Stil
Meine Frage ist: Kann jemand eine Abhilfe zu diesem Chrom bestimmten Fehler vorschlagen? Mein Problem ist nicht, dass der Buchstabe X hervorgehoben ist, sondern dass er die .foo-Klasse verliert und ich ihn nicht mehr finden kann. Es würde mir gut gehen, wenn entweder die .foo-Klasse bleibt ODER wenn die Hintergrundfarbe verschwindet. Ich weiß nicht einmal, wie ich dies debuggen kann, da DOM-Breakpoints nicht ausgelöst werden, wenn dies passiert.
<div contenteditable="true">
DO NOT REPLACE. <span class="foo">END a b c</span> d START la la
</div>
und die CSS sieht wie folgt aus:
.foo {
background-color: #ff0000;
}
Die Schritte, um den Fehler auf Chrom auszulösen sind:
Maus nehmen, setzen Sie den Cursor neben dem Wort START
Klicken und halten Sie, um Text auszuwählen, gehen Sie nach LINKS und beenden Sie die Auswahl am Wort ENDE.
Die Auswahl sollte den folgenden Text genau abdecken: "END a b c d START". Auch hier muss die Auswahl von rechts nach links erfolgen.
Geben Sie einen neuen Charakter auf der Tastatur, wie ‚X‘
Wenn X in rot markiert ist, haben Sie den Fehler ausgelöst hat.
Der Fehler ist vor allem, dass die HTML wie folgt aussieht jetzt:
<div contenteditable="true">
DO NOT REPLACE. <span style="background-color: rgb(255, 0, 0);">X</span> la la
</div>
Wo die .foo Klasse ging und wo aus diesem Hintergrund-Farbe Stil gekommen? Das Hinzufügen von DOM-Haltepunkten zum div oder zum Bereich wird nicht ausgelöst, wenn dies geschieht.
Sehr gut gemacht Frage. Ich bin neugierig zu erfahren, was dort vor sich geht. – connexo
Interessant, es erhält die Hintergrundfarbe aus der Klasse und platziert sie in einem Stil. Was noch interessanter ist, ist, dass, wenn die Klasse eine "color" -Eigenschaft hat, die Spanne ihrer Klasse beraubt und in ein "" -Tag mit dem Farbattribut gewickelt wird !!! [Hier ist ein Beispiel dafür] (http://jsfiddle.net/yhgp3xcv/) – misterManSam
Ja, und wenn Sie '.foo {display: block} haben, fügt es eine zusätzliche '
' in der Spannweite hinzu. Wenn Sie '.foo {display: inline-block} haben, verschwindet der Bereich vollständig. Schöne Sachen.Keine Lösung obwohl; Ich testete mit "id" und "role", aber diese Attribute verschwinden auch. –