Firefox contenteditable cursor issue

Question

I've got a contenteditable div that, when empty (only the placeholder text is present per the CSS below), the user is able to click the right-hand side of the div and place the cursor there (see screenshot). Once the cursor is there, the user is unable to type at all. The issue only happens in Firefox (I'm in 33.1.1). The issue does not happen in any other browser.

HTML:

<div class="content-editable form-textarea font-face-frank"
    placeholder="Type something here..." contenteditable="true"
    ng-model="form.message" ng-class="form.fontName" strip-br="true" required></div>

CSS:

.content-editable {
    outline-width: 0;
    min-height: 1em;
    max-height: 300px;
    line-height: 1em;
    overflow-y: scroll;
    display: inline-block;
    width: 100%;
    font-size: 44px;
    padding: 10px;
}
.content-editable:empty:before {
    content: attr(placeholder);
}

What I've Tried:

• Placing a space, <br> in the div - fixes issue, but then the placeholder text is not displayed;
• Adding a  , <br> via .content-editable:empty {}; the placholder text remains, but the cursor issue is not addressed.

Repro of the Issue

• JSFiddle

Update

Removing the content: attr(placeholder); css directive resolves the issue, not that doing that allows me to display the 'placeholder' text in the contenteditable element.

Answer 1

Here's a fiddle that you might like: http://jsfiddle.net/e5gwc1gq/2/

I believe that the problem is because the :before psuedo element doesn't allow access to the underlying parent-div.

The reason I think so is because if you were to replace before with after, the problem persists, but is flipped, ie, now if you click in the left, it won't work properly.

Note: You might want to add word-wrap: break-word; css rule for .content-editable, since firefox doesn't add this by default, but chrome does.

Answer 2

This CSS solution actually works. Caret position sets to the end, text can selected and everything works as expected.

-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
-o-user-select: text;

Tested on Firefox 35.0.1, Chrome 40.0.2214.94 m, IE 11 Here's a fiddle: http://jsfiddle.net/yam9kkbL/

Answer 3

We ran into the same issue as described in the original question. We added a handler for "click" and "keydown" for Firefox. If the box is empty and user is trying to click or type in the box, we blur it and then focus on it again.

if ($("body").hasClass("ff"))
{
    var box = $(".content-editable");
    box.on("keydown click", function(e){
        if(box.text().trim().length == 0){
            box.blur().focus();
        }
    });
}

Answer 4

-moz-user-select: text !important;

Works for me... Firefox added -moz-user-select: none; as inline style