HTML5 - contenteditable = "false" verschachtelt in contenteditable = "true"

Question

Ich habe sehr unterschiedliche Verhaltensweisen mit verschachtelten contenteditable = "false" Elemente innerhalb eines übergeordneten contenteditable = "true:

<pre> 
    <div contenteditable="true"> 
    <span>I'm supposed to be editable</span> 
    <p contenteditable="false">I'm NOT supposed to be editable.<br>Neither should I.</p> 
    <span contenteditable="false">I'm NOT supposed to be editable.</span> 
    </div> 
    </pre> 

This fiddle zeigt, wie zwei Elemente, die nicht bearbeitbar sein sollten, sind zwar mit dem Internet Explorer 11 editierbar, aber nicht mit Google Chrome. Was gibt?

Ich habe einige Leute gesehen, die eine seltsame Problemumgehung anwenden, indem sie sie auf "true" setzen, was tatsächlich für IE funktioniert. aber hat den gegenteiligen Effekt auf Google Chrome (wie es sollte).

Die Antwort für diese ähnliche question stammt aus 2013. Drei Jahre nach, ist dies immer noch das aktuelle Szenario?

Edit: This fiddle erreicht fast das gewünschte Ergebnis. Wenn Sie den Cursor jedoch auf "Nicht verschieben" setzen und ihn nach links verschieben, bis Sie die nicht bearbeitbare Spanne erreichen, erhalten Sie den Fokus und können ihn bearbeiten. Irgendwelche Ideen, um dieses Verhalten zu vermeiden?

Betroffene Browser: Internet Explorer 11

Answer 1

Dies ist ein Fehler in Internet Explorer 11. Abschnitt 7.6.1 of the HTML5 specification heißt es:

Das contenteditable Attribut ist ein Aufzählungs Attribut, dessen Schlüsselwörter sind die leere Zeichenkette, true und false. Die leere Zeichenfolge und das Schlüsselwort true werden dem Status true zugeordnet. Das false-Schlüsselwort wird dem false-Status zugeordnet. Darüber hinaus gibt es einen dritten Zustand, erben Zustand, die fehlt Wert Standardwert (und die ungültig Wert Standardwert).

Der Status true zeigt an, dass das Element bearbeitbar ist. Der erben Zustand zeigt an, dass das Element bearbeitbar ist, wenn sein Elternteil ist. Der Status false zeigt an, dass das Element nicht bearbeitet werden kann.

Das bedeutet, dass ein contenteditable=false Element innerhalb eines contenteditable=true Elements nicht bearbeitet werden soll.

Darüber hinaus sollte ein contenteditable=true Element innerhalb eines contenteditable=true Elements seinen Inhalt editierbar haben. Das bedeutet, dass die Antwort auf die Frage, die du verlinkt hast, tatsächlich ungültig ist (obwohl es bei der Veröffentlichung möglicherweise der Fall war).