Zentrieren der Platzhalter Caret in contentEditable Element

Question

Ich habe folgendes: http://jsfiddle.net/mb76koj3/.

[contentEditable=true]:empty::before{ 
 
    content:attr(data-ph); 
 
    color: #CCC; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<h1 contenteditable="true" data-ph="Name"></h1>

Das Problem ist die <h1> zentriert ist, aber der Platzhalter caret nicht zentriert ist (bis Sie mit der Eingabe beginnen). Der Caret ist auf der linken Seite, wie kann ich das ändern?

Answer 1

Keine ideale Lösung, aber wir können den Effekt vortäuschen, indem wir von 50% auf das Element :empty anwenden, damit der Cursor in der Mitte erscheint.

Und dann ausrichten Sie den Platzhalter (das Pseudo-Element) in der Mitte durch Verwendung der absoluten Positionierung und einen negativen Wert von translateX Transformationsfunktion.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
@-moz-document url-prefix() { /* CSS Hack to fix the position of cursor on FF */ 
 
    [contentEditable=true]:empty { 
 
    padding-top: 1em; 
 
    padding-bottom: .25em; 
 
    -moz-box-sizing: content-box; 
 
    } 
 
} 
 

 
[contentEditable=true]:empty { 
 
    padding-left: 50%; 
 
    text-align: left; /* Fix the issue on IE */ 
 
} 
 

 
[contentEditable=true]:empty::before{ 
 
    content:attr(data-ph); 
 
    color: #CCC; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%); 
 
    -moz-transform: translateX(-50%); 
 
    -ms-transform: translateX(-50%); 
 
    -o-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    position: relative; 
 
}

<h1 contenteditable="true" data-ph="Name"></h1>

Das einzige Problem, das bleibt - wie in den bereitgestellten Code des OP zu sehen ist - besteht darin, dass auf den folgenden, ein leeres <br> Element contentEditable Elemente angehängt wird, die :empty pseudo-Klasse verursacht nicht passend zum Element. Daher wird der Platzhalter nicht wiederhergestellt.

Da jedoch die Frage über die Position des Cursors ist, nehme ich an, dass dieses Verhalten für das OP gut ist.

Answer 2

Nachdem bei Hashem Qolami's answer suchen, ich kam mit dieser:

[contentEditable=true]:empty { 
 
    padding-left: 50%; 
 
} 
 

 
[contentEditable=true]:empty::before{ 
 
    content:attr(data-ph); 
 
    color: #CCC; 
 
    text-align: center; 
 
    margin-left: -100%; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
}

<h1 contenteditable="true" data-ph="Name"></h1>

jedoch adamdc78 entdeckt zwei Probleme:

• In IE11, erscheint der Cursor nach dem Platzhalter .
• In Firefox wird der Platzhalter nach der Eingabe und Leerung nicht wiederhergestellt.

Zu dieser Zeit kann ich nicht herausfinden, wie man das löst.