Centratura del segnaposto segnaposto nell'elemento contentEditable

Question

Ho il seguente: 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>

Il problema è la <h1> è centrato, ma il cursore segnaposto non è centrato (fino a quando si inizia a digitare). Il punto di inserimento è sul lato sinistro, come posso cambiarlo?

Answer 1

Non è una soluzione ideale, ma possiamo simulare l'effetto applicando uno padding-left di 50% all'elemento :empty per far apparire il cursore al centro.

E quindi allineare il segnaposto (lo pseudoelemento) al centro utilizzando il posizionamento assoluto e un valore negativo della funzione di trasformazione 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>

L'unico problema che rimane - come si può vedere nel codice fornito del PO - è che su Firefox, un <br> elemento vuoto viene aggiunto contentEditable elementi che provoca :empty pseudo-classe non abbinare l'elemento più. Quindi il segnaposto non verrà ripristinato.

Tuttavia, poiché la domanda riguarda la posizione del cursore, presumo che questo comportamento sia corretto per l'OP.

Answer 2

Dopo aver guardato Hashem Qolami's answer, sono arrivato fino a questo:

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

Tuttavia, adamdc78 scoperto 2 problemi:

• Nel IE11, il cursore appare dopo il segnaposto .
• In Firefox, il segnaposto non viene ripristinato dopo aver digitato e svuotato.

In questo momento, non riesco a capire come risolverlo.