Chrome scheint zu ignorieren Benutzer-Select in einem contenteditable div

Question

Ich muss einige Elemente in einem contenteditablediv nicht auswählbar machen, so dass der Benutzer sie überspringt, wenn sie versuchen, den Caret herum bewegen, wo sie sind. Die offensichtliche Lösung scheint zu sein, diesen Teilen den user-select: none Stil zu geben. Und das funktioniert wirklich gut in Firefox, aber leider komplett in Google Chrome fehlschlägt.

.ok { 
 
    -webkit-user-select: text; 
 
-moz-user-select: text; 
 
-ms-user-select: text; 
 
user-select: text; 
 
} 
 

 
.nope { 
 
-webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    }

<div contenteditable="true" readonly> 
 
    <span class="ok">One</span><span class="nope">Two</span><span class="ok">Three</span> 
 
    <div class="nope"> 
 
<span class="ok">One</span><span class="nope">Two</span><span class="ok">Three</span> 
 
    </div> 
 
    <span class="nope">One</span><span class="ok">Two</span><span class="nope">Three</span> 
 
    <div class="nope"> 
 
<span class="nope">One</span><span class="ok">Two</span><span class="nope">Three</span> 
 
    </div> 
 
</div>

Gibt es eine Möglichkeit, dies auch in Chrome zur Arbeit zu kommen, oder ist es eine unüberwindbare Begrenzung?

Answer 1

Ich bin auch auf dieses Problem gestoßen und habe eine anständige Arbeit gefunden. Es ist nicht schön, aber es kann oft die Arbeit erledigen. Wenn Sie contenteditable="false" zusammen mit user-select:none; hinzufügen, verarbeitet Chrome die CSS-Regel korrekt. Diese Elemente sind nicht mehr wählbar.

Der Hauptnachteil zu diesem (abgesehen davon, dass die HTML zu ändern) ist, dass, wenn man contenteditable="false" auf einem Wrapper Div hinzufügt, alle seine Kinder auch nicht editierbar werden. Sie können einen weiteren contenteditable="true" verschachteln, der es ermöglicht, den verschachtelten Inhalt editierbar zu machen, aber dann kann man nicht aus dem verschachtelten Inhalt den externen Inhalt auswählen.

Am Ende wäre eine korrekte Implementierung der CSS-Regel in Chrome, wenn contenteditable aktiviert ist, die beste Lösung. (Konnte aufgrund der vom Benutzer gewählten Spezifikation absichtlich sein, siehe unten stehenden Kommentar.)

Beispiel einer Lösung mit contenteditable="false" (nicht auf Wrapper divs).

.ok { 
 
    -webkit-user-select: text; 
 
    -moz-user-select: text; 
 
    -ms-user-select: text; 
 
    user-select: text; 
 
} 
 

 
.nope { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<div contenteditable="true" readonly> 
 
    <span class="ok">One</span> 
 
    <span class="nope" contenteditable="false">Two</span> 
 
    <span class="ok">Three</span> 
 
    <div> 
 
    <span class="ok">One</span> 
 
    <span class="nope" contenteditable="false">Two</span> 
 
    <span class="ok">Three</span> 
 
    </div> 
 
    <span class="nope" contenteditable="false">One</span> 
 
    <span class="ok">Two</span> 
 
    <span class="nope" contenteditable="false">Three</span> 
 
    <div> 
 
    <span class="nope" contenteditable="false">One</span> 
 
    <span class="ok">Two</span> 
 
    <span class="nope" contenteditable="false">Three</span> 
 
    </div> 
 
</div>