Wyśrodkowanie symbolu zastępczego w elemencie contentEditable

Question

Mam następujące: 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>

Problemem jest <h1> jest wyśrodkowany, ale daszek zastępczy nie jest wyśrodkowany (aż zaczniesz pisać). Daszek jest po lewej stronie, jak mogę to zmienić?

Answer 1

Nie jest to idealne rozwiązanie, ale możemy sfałszować efekt, dodając element padding-left z 50% do elementu :empty, aby kursor pojawił się pośrodku.

Następnie wyrównaj symbol zastępczy (pseudoelement) w środku, używając bezwzględnego pozycjonowania i wartości ujemnej funkcji przekształcania translateX.

* { 
 
    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>

Jedynym problemem pozostaje - jak można zobaczyć w kodzie pod warunkiem, że OP - jest to, że w Firefoksie pusty <br> element jest dołączony do contentEditable elementów powoduje :empty pseudoklasa nie pasuje do elementu już. W związku z tym symbol zastępczy nie zostanie przywrócony.

Jednak ponieważ pytanie dotyczy pozycji kursora, zakładam, że to zachowanie jest w porządku dla PO.

Answer 2

Po obejrzeniu Hashem Qolami's answer, wpadłem na to:

[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>

Jednak adamdc78 odkryto 2 problemy:

• W IE11, kursor po zastępczy pojawia .
• W Firefoksie symbol zastępczy nie jest przywracany po wpisaniu i opróżnieniu.

W tej chwili nie mogę wymyślić, jak rozwiązać ten problem.