我之前一直在试图提出问题，但并没有成功地解释或提供一个能够展示错误发生的工作示例。所以，这里再试一次：
我正在尝试在可编辑DIV上复制占位符效果。核心概念很简单：
<div contenteditable><em>Edit me</em></div>
<script>
$('div').focus(function() {
$(this).empty();
});
</script>
这种方法有时可以奏效。但是如果占位符包含HTML，或者进行了其他处理，则可编辑DIV的文本插入符将被移除，用户必须重新单击可编辑DIV才能开始输入（即使它仍然处于焦点状态）:
例如：http://jsfiddle.net/hHLXr/6/
我无法在处理程序中使用焦点触发器，因为这会创建一个事件循环。因此，我需要一种重新设置可编辑DIV中插入符光标的方法，或以其他方式重新聚焦。
这里是一个仅使用CSS的解决方案，补充了其他答案中的一些内容：
<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
[contentEditable=true]:empty:not(:focus)::before{
content:attr(data-ph)
}
</style>
编辑：这是我在Codepen上的代码片段 -> http://codepen.io/mrmoje/pen/lkLez
编辑2：请注意，由于在对所有行执行“选择全部剪切”或“选择全部删除”后，<br>元素仍然存在于div中，因此此方法无法100％适用于多行应用程序。致谢：- @vsync
退格键似乎工作得很好（至少在webkit / blink上）
我刚刚发布了一个插件。
它使用CSS3和JavaScript的组合，在不添加到div内容的情况下显示占位符：
HTML：
<div contenteditable='true' data-placeholder='Enter some text'></div>
CSS：
div[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
content: attr(data-placeholder);
float: left;
margin-left: 5px;
color: gray;
}
JS：
(function ($) {
$('div[data-placeholder]').on('keydown keypress input', function() {
if (this.textContent) {
this.dataset.divPlaceholderContent = 'true';
}
else {
delete(this.dataset.divPlaceholderContent);
}
});
})(jQuery);
就这样了。
div元素。请查看关联的GitHub仓库获取最新版本。 - Craig Stuntzdiv 文本，它能正常工作吗？在我的情况下，占位符和我的文本是连接在一起的。 - demo您可能需要手动更新选择。在IE中，焦点事件太晚了，所以我建议使用activate事件。以下是一些代码，可以在所有主流浏览器中执行此操作，包括IE<= 8（无法使用仅CSS的替代方案）：
Live demo: http://jsfiddle.net/hHLXr/12/
代码：
$('div').on('activate', function() {
$(this).empty();
var range, sel;
if ( (sel = document.selection) && document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(this);
range.select();
}
});
$('div').focus(function() {
if (this.hasChildNodes() && document.createRange && window.getSelection) {
$(this).empty();
var range = document.createRange();
range.selectNodeContents(this);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
});
只需使用CSS伪类。
span.spanclass:empty:before {content:"placeholder";}
<div contenteditable placeholder="I am a placeholder"></div>
[contenteditable][placeholder]:empty:before {
content: attr(placeholder);
color: #bababa;
}
:empty选择器只有在标签的开头和结尾之间确实没有任何内容时才起作用。这包括换行、制表符、空格等。
你所需的只是这个小解决方案。
[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block; /* For Firefox */
}
pointer-events: none;（在您的codepen css中找到）来解决了这个问题。在这里提及，为那些正在寻找特定Chrome问题解决方案的人。 - Guganeshan.THTML：
<div class="placeholder" contenteditable="true"></div>
CSS3:
.placeholder:after {
content: "Your placeholder"; /* this is where you assign the place holder */
position: absolute;
top: 10px;
color: #a9a9a9;
}
jQuery:
$('.placeholder').on('input', function(){
if ($(this).text().length > 0) {
$(this).removeClass('placeholder');
} else {
$(this).addClass('placeholder');
}
});
<div contenteditable><em>Edit me</em></div>
<script>
$('div').focus(function() {
var target = $(this);
window.setTimeout(function() { target.empty(); }, 10);
});
</script>
var curText = 'Edit me';
$('div').focusin(function() {
if ($(this).text().toLowerCase() == curText.toLowerCase() || !$(this).text().length) {
$(this).empty();
}
}).focusout(function() {
if ($(this).text().toLowerCase() == curText.toLowerCase() || !$(this).text().length) {
$(this).html('<em>' + curText + '</em>');
}
});
这不是你问题的确切解决方案...
在summernote选项中设置
airMode:true
占位符以这种方式工作。
data-ph占位符，同样的CSS代码就可以处理所有这些元素。 - mrmoje:empty。失败了。 - vsync