Here is the code snippet I am working with:
HTML:
<div class="title" contenteditable="true" placeholder="Title"></div>
CSS:
.title {
width: 500px;
margin: 0 auto;
text-align: center;
}
[contenteditable=true]:empty:before{
content: attr(placeholder);
}
Currently, the editable div is centered with a placeholder. However, the issue I am facing is that when the div is focused for the first time, the cursor appears at the beginning of the text, not at the placeholder: !
I would like the placeholder to stay visible until a character is entered, with the cursor positioned at the beginning of the placeholder text. Are there any suggestions on how to achieve this?
Thank you!