Firefox contenteditable 光标问题

Question

我有一个 contenteditable div，当为空时(根据下面的 CSS，仅存在占位符文本)，用户可以单击 div 的右侧并将光标放在那里(见屏幕截图)。一旦光标在那里，用户就根本无法打字。该问题仅发生在 Firefox 中(我在 33.1.1 中)。该问题不会在任何其他浏览器中发生。

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);
}

我试过的:

放置一个空格，<br>在 div 中 - 修复了问题，但随后不显示占位符文本；

添加   , <br>通过 .content-editable:empty {} ;占位符文本仍然存在，但未解决光标问题。

问题重现

JSFiddle

更新

删除 content: attr(placeholder); css 指令解决了这个问题，而不是这样做允许我在 contenteditable 元素中显示“占位符”文本。

Answer 1

这是您可能喜欢的 fiddle :http://jsfiddle.net/e5gwc1gq/2/

我认为问题是因为 :before伪元素不允许访问底层父 div。

我这么认为的原因是因为如果你要替换 before与 after ，问题依然存在，但是被翻转了，即现在如果你点击左边，它就不能正常工作了。

注意:您可能需要添加 word-wrap: break-word; .content-editable 的 CSS 规则，因为firefox默认不添加这个，但是chrome会。