Come impedire che il testo `` before` CSS 'sia modificabile mentre il `div` stesso è modificabile?

Ho un corpo modificabile con un div:Come impedire che il testo `` before` CSS 'sia modificabile mentre il `div` stesso è modificabile?

<body contenteditable="true"> 
    <div class="paragraph">Text</div> 
<body/>

E uno stile :before:

div.paragraph:before { 
    content: "☑"; 
}

Fiddle: http://jsfiddle.net/uy9xs5p0/

In Firefox posso mettere il cursore all'inizio del testo e premere backspace e il segno di spunta viene cancellato. Come impedirlo?

fonte

2015-02-05 ceving

si è in grado di modificare il codice HTML? – Mooseman

Questo è un caso strano e interessante. Hai provato a utilizzare (Mozilla-specifico) [-moz-user-modify] (https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-user-modify) sul ' : before'? – Boldewyn

Hm, sembra non funzionare: http://jsfiddle.net/eezsgc62/ – Boldewyn

si sta impostando l'contenteditable nel div genitore, quindi, quando si cancellano, si elimina il div.paragraph, in modo che il pseudo sarà andato.

Vedere che se si imposta la proprietà nel div child, invece, è possibile farlo funzionare.

div.paragraph:before { 
 
    content: "☑"; 
 
}

<div> 
 
    <div contenteditable="true" class="paragraph">Text</div> 
 
</div>

fonte

2015-02-05 12:12:01 LcSalazar

Non si sta modificando il contenuto di :before.

Rimuove semplicemente l'intero elemento .paragraph una volta che si svuota, oppure se si esegue il backspace quando si è all'inizio del tag.

fonte

2015-02-05 12:06:54

In firefox non deve essere vuoto, può rimuovere il segno di spunta –

Il testo "Testo" è ancora lì dopo che il testo precedente è stato rimosso. – ceving

Sì, ma non rimuove il contenuto di ': before', rimuove il div avvolto. –

Quando questo problema viene riprodotto, (tramite this fiddle, ad esempio) gli strumenti di sviluppo mostrano che div.paragraph viene rimosso. Rimane solo un nodo di testo.

enter image description here

diventa

enter image description here Per fermare il div venga rimosso, non dare il suo genitore contenteditable. Usare questo invece:

<body> 
    <div class="paragraph" contenteditable="true">Text</div> 
</body>

Fiddle: http://jsfiddle.net/5y00q6ya/3/

fonte

2015-02-05 12:08:51 Mooseman

Questa dovrebbe essere la risposta accettata. Hai risposto 2m prima dell'altra risposta. –

possibile soluzione a questo problema. Questo sembra funzionare come vuoi che sia.

<div contenteditable="true" class="upper-div"> 
    <div class="paragraph">Text</div> 
</div> 

div.upper-div:before { 
    content: "☑"; 
    display:inline-block; 
} 
.paragraph{display:inline-block;}

fonte

2015-02-05 12:14:29 AngularHarsh

Il tuo suggerimento sposta il segno di spunta sul corpo esterno. Ho bisogno del segno di spunta su ogni div, non solo uno per il corpo. – ceving

Le altre risposte spiegano il problema. Se un div eredita la sua capacità di modifica dal suo genitore, è possibile rimuovere il bambino div stesso e insieme allo div anche il contenuto precedente.

Per evitare ciò, è necessario che il modificabile div non debba essere inserito in un genitore modificabile. Ciò rende necessario mettere ogni modificabile div in un genitore non modificabile div per conservare il figlio modificabile div.

L'esempio seguente mostra questo

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>

fonte

2015-02-05 13:12:04 ceving

Come impedire che il testo `` before` CSS 'sia modificabile mentre il `div` stesso è modificabile?

risposta

Problemi correlati