contenteditable中的占位符 – 焦点事件问题

我一直在试图问这个，没有任何解释/certificate错误发生的工作示例的运气。 所以这里是另一个尝试：

我试图在contenteditable DIV上复制一个占位符效果。 核心概念很简单：

<div contenteditable><em>Edit me</em></div> <script> $('div').focus(function() { $(this).empty(); }); </script> 

这可能有些工作，但是如果占位符包含HTML，或者如果有其他处理正在进行，可编辑的DIV的文本插入符将被删除，并且用户必须重新点击可编辑的DIV才能开始input（即使它是仍然重点）：

例如： http : //jsfiddle.net/hHLXr/6/

我不能在处理程序中使用焦点触发器，因为它会创build一个事件循环。 所以我需要一种方法在可编辑的DIV中重新设置插入光标，或者以其他方式重新对焦。

Answer 1

您可能需要手动更新select。 在IE中，焦点事件为时已晚，所以我build议使用activate事件。 这里有一些代码可以在所有主stream浏览器中执行，包括IE <= 8（这是一个仅用于CSS的选项）：

现场演示： 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); } }); 

Answer 2

这里是一个CSS的唯一解决scheme，增加了一些其他的答案： –

 <div contentEditable=true data-ph="My Placeholder String"></div> <style> [contentEditable=true]:empty:not(:focus)::before{ content:attr(data-ph) } </style> 

编辑：这是我的代码片段 – > http://codepen.io/mrmoje/pen/lkLez

编辑2：build议，这种方法不适用于多行应用程序100％，因为在所有行上执行全select-all-delete select-all-cut或全select-all-delete后，残留的元素存在于div中。 积分： – @vsync
退格似乎工作正常（至less在webkit /眨眼）

Answer 3

我刚刚为此发布了一个插件 。

它使用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); 

就是这样。

Answer 4

只需使用CSS伪类。

 span.spanclass:empty:before {content:"placeholder";} 

Answer 5

我发现最好的方法是像往常一样使用placeholder属性，并添加几行CSS。

HTML

 <div contenteditable placeholder="I am a placeholder"></div> 

CSS

 [contenteditable][placeholder]:empty:before { content: attr(placeholder); color: #bababa; } 

注意：只有在开始和结束标签之间没有任何内容的情况下，CSS :emptyselect器才起作用。 这包括新行，标签，空白空间等

Codepen

Answer 6

所有你需要的是这个小解决scheme

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

演示： http : //codepen.io/flesler/pen/AEIFc

Answer 7

这是我的方式：

它使用了jQuery和CSS3的组合。 与html5占位符属性完全一样！ 。

• 当你input第一个字母时马上隐藏起来
• 当你删除你input的内容时再次显示

HTML：

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

演示： http : //jsfiddle.net/Tomer123/D78X7/

Answer 8

这是我使用的修复程序。

 <div contenteditable><em>Edit me</em></div> <script> $('div').focus(function() { var target = $(this); window.setTimeout(function() { target.empty(); }, 10); }); </script> 

我为此开发了一个jQuery插件。 看看https://github.com/phitha/editableDiv

Answer 9

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

Answer 10

这不是你的问题的确切解决scheme..

在summernote选项设置

airMode：真

占位符以这种方式工作。