carret in div contenteditable

Question

In first time when I'm clicking in div my carret (cursor) go up, but if I writting text into div text is printed correctly (in the middle of div). How can I fix problem with placeholder in this div? I need the cursor to initially appear in the middle (like text when you are printing).

Demo http://jsfiddle.net/0gr09835/2/, and the related snippet:

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block; /* For Firefox */
}
[contenteditable=true]:empty:focus:before {
    content: "";
}

My screenshot:

It works correctly in Chrome, but not in Firefox.

Maciek Lewkowicz · Answer 1 · 2017-11-03T10:35:56.027

This seems like a fairly old bug in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=904846).

A possible workaround would be to replace content: '' with display: none in [contenteditable=true]:empty:focus:before.

div.msg {
    font-size: 16px;
    float: left;
    width: calc(100% - 80px);
    height: 64px;
    line-height: 64px;
    padding: 0px 10px;
    color: #1a1a1a;
    border: 0;
    background-color: transparent;
    outline: none;
    font-weight: 400;
    border: 1px solid #000;
    margin-top: 25px;
}

[contenteditable=true]:empty:before{
    content: attr(placeholder);
    display: block; /* For Firefox */
}

[contenteditable=true]:empty:focus:before {
    display: none;
}

<div class="msg" name="msg" placeholder="Write message..." contenteditable="true"></div>

A similar problem was also mentioned in Firefox sets wrong caret position contentEditable on focus.

carret in div contenteditable

1 Answers1