: nach Pseudo-Element und Inhalt auf contenteditable

Ich habe eine contenteditable div. Ich benutze CSS :after Selector, um einen Asterix an den Inhalt anzufügen.: nach Pseudo-Element und Inhalt auf contenteditable

<div contenteditable="true">Test content</div> 

[contenteditable]:after { 
    content: ' *'; 
}

http://jsbin.com/hojemaziba/edit?html,css,output

Dies verursacht jedoch Probleme. In Chrome und IE wird der Cursor an einer falschen Stelle angezeigt und in Firefox erscheint der Asterix in der nächsten Zeile.

Wie soll ich den Asterix anhängen?

Quelle

2017-02-08 Mikko

Durch Hinzufügen von display: inline-block; und einer gewissen Positionierung wird die Carret-Position beim Tippen fixiert.

[contenteditable] { 
 
    position: relative; 
 
    display: inline-block; 
 
    border: solid 1px red; 
 
    padding-right: 20px; 
 
} 
 

 
[contenteditable]:after { 
 
    display: inline-block; 
 
    content: '*'; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 2px; 
 
}

<div contenteditable="true">Test content</div>

Quelle

2017-02-08 07:03:16 caramba

@Kaiido yep, es gesehen und es fixiert. Die Antwort wird aktualisiert, bitte sehen Sie es noch einmal. Das Problem ist jetzt, wenn Sie zu viel eingeben und es zur nächsten Zeile geht, bleibt das Asterix an der absoluten Position. – caramba

Ja, ich wollte dich über neue Zeilenprobleme informieren ;-) Aber ich denke, dass FF '
' Einfügen ist eigentlich ein Fehler, aber ich weiß nicht 'contenteditable' Spezifikationen zu viel, so kann ich nicht sagen sicher. – Kaiido

Danke für Ihre Antwort. Die absolute Position ist ein bisschen schwierig, da das Asterix am Ende der Zeile stehen sollte und wie du angemerkt hast, wenn du zu viel tippst, bleibt es oben. – Mikko

Mit Position relativ ist viel besser, wenn der Text mehr oder einzelne Zeile hat.

div { 
    display:inline-block; 
} 

[contenteditable]:after { 
    content: ' *'; 
    display:inline-block; 
    position:relative; 
    top:4px; 
    padding-left:4px; 
}

http://codepen.io/bherumehta/pen/MJqEPp

Quelle

2017-02-08 08:31:21

: nach Pseudo-Element und Inhalt auf contenteditable

Antwort

Verwandte Themen