我有一个 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 {}
;占位符文本仍然存在,但未解决光标问题。 问题重现
更新
删除
content: attr(placeholder);
css 指令解决了这个问题,而不是这样做允许我在 contenteditable 元素中显示“占位符”文本。
最佳答案
这是您可能喜欢的 fiddle :http://jsfiddle.net/e5gwc1gq/2/
我认为问题是因为 :before
伪元素不允许访问底层父 div。
我这么认为的原因是因为如果你要替换 before
与 after
,问题依然存在,但是被翻转了,即现在如果你点击左边,它就不能正常工作了。
注意:您可能需要添加 word-wrap: break-word;
.content-editable
的 CSS 规则,因为firefox默认不添加这个,但是chrome会。
关于Firefox contenteditable 光标问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27093136/