mam edytowalną organizmowi div:Jak zapobiec edytowaniu tekstu CSS `: before`, gdy samo` div` można edytować?
<body contenteditable="true">
<div class="paragraph">Text</div>
<body/>
I :before styl:
div.paragraph:before {
content: "☑";
}
Fiddle: http://jsfiddle.net/uy9xs5p0/
W Firefoksie można umieścić kursor na początku tekstu i naciśnij klawisz Backspace, a znacznik wyboru zostanie usunięty. Jak temu zapobiec?
Jesteś ustawiania contenteditable w div nadrzędnej, dlatego podczas usuwania, usuwasz div.paragraph, więc pseudo zniknie.
Zobacz, że jeśli ustawisz właściwość w div podrzędnym zamiast tego, możesz sprawić, żeby działało.
div.paragraph:before {
content: "☑";
}<div>
<div contenteditable="true" class="paragraph">Text</div>
</div>Nie edytujesz zawartości :before.
Po prostu usuwa cały element .paragraph po jego opróżnieniu lub backspace, gdy znajdujesz się na początku tagu.
W firefoxie nie musi być pusty, może usunąć zaznaczenie. –
Tekst "Tekst" nadal istnieje po usunięciu poprzedniego tekstu. – ceving
Tak, ale nie usuwa zawartości ': before', usuwa zawinięty div. –
Po odtworzeniu tego problemu (na przykład przez this fiddle) narzędzia programistyczne pokazują, że usunięto div.paragraph. Pozostaje tylko węzeł tekstowy.
staje
Aby zatrzymać div przed usunięciem, nie dają jej rodzica contenteditable. Użyj tego zamiast:
<body>
<div class="paragraph" contenteditable="true">Text</div>
</body>
Fiddle: http://jsfiddle.net/5y00q6ya/3/
To powinna być zaakceptowana odpowiedź. Odpowiedziałeś 2m przed drugą odpowiedzią. –
Możliwe obejście tego problemu. Wydaje się, że działa tak, jak chcesz.
<div contenteditable="true" class="upper-div">
<div class="paragraph">Text</div>
</div>
div.upper-div:before {
content: "☑";
display:inline-block;
}
.paragraph{display:inline-block;}
Twoja sugestia przesuwa znacznik wyboru do zewnętrznego ciała. Potrzebuję znaku kontrolnego na każdym div, a nie tylko jednego dla ciała. – ceving
Inne odpowiedzi wyjaśniają problem. Jeśli div dziedziczy zdolność edycyjną od obiektu nadrzędnego, możliwe jest usunięcie potomka i wraz z div także przed-treścią.
Aby temu zapobiec, konieczne jest, aby edytowalna div nie mogła zostać umieszczona w edytowalnym obiekcie nadrzędnym. W związku z tym konieczne jest umieszczenie każdego edytowalnego obiektu div w nie podlegającym edycji rodzica div w celu zachowania edytowalnego potomka div.
Poniższy przykład pokazuje ten
div.node {
margin-left: 1em;
}
div.paragraph:before {
content: "☑";
}<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Major</div>
<div contenteditable="false" class="node">
<div contenteditable="true" class="paragraph">Minor</div>
</div>
</div>
Czy jesteś w stanie zmodyfikować html? – Mooseman
To dziwny i interesujący przypadek. Czy próbowałeś użyć (Mozilla-specific) [-moz-user-modify] (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify) na ' : przed "? – Boldewyn
Hm, wygląda na to, że nie działa: http://jsfiddle.net/eezsgc62/ – Boldewyn