当span元素不包含文本时，请使用占位符文本填充

在得到一个很好的答案之后，我发现这可能是一个可能重复的占位符问题 – 焦点事件问题

我有一个带有contenteditable="true"的HTML 元素。 我的目标是利用span元素创建一个无缝的“输入”字段。 我在解决以下问题时遇到问题：

• DOM加载可编辑和默认文本“制作新标记..”
• 当用户点击文本更新时，请说“开始输入…”
• 在第一次按键时，删除文本并开始填写用户输入
• 如果没有文本且用户仍在编辑，请将文本替换为“开始输入…”
• 如果没有文本且用户没有进行交互，请将文本替换为“制作新标记…”

它的工作原理除了当用户正在编辑元素并清除所有文本时，该元素将折叠并变为不可编辑。 我需要确保始终有文本，或者我需要找到处理这些情况的另一种方法

这是我正在使用的元素：
*注意：我使用的是jQuery，Bootstrap和FontAwesome

 Make a new tag .. 

而我的javascript：

 $('#new-tag').click(function(){ if( $(this).data('editing') !== 'active'){ $(this).text('Start typing ..'); } }); // i do it this way because when .text('') is used, the  breaks $('#new-tag').keydown(function(e){ if( $(this).data('editing') !== 'active'){ $(this).text(String.fromCharCode(e.charCode)); } $(this).data('editing','active'); }); $('#new-tag').change(function(){ if( $(this).data('editing') == 'active' && $(this).text() == ''){ $(this).text('Make a new tag ..'); $(this).removeData('editing'); } }); 

有人可以让这种魔力发生吗？ 这是我发布的一个小提琴 。

Answer 1

我建议你可以考虑使用CSS：

 span.badge[contenteditable] { display: inline-block; } span.badge[contenteditable]:empty::before { content: 'Make a new tag'; display: inline-block; } span.badge[contenteditable]:empty:focus::before { content: 'Start typing'; } 

JS小提琴演示 。

并且为了使其更具可定制性，给定HTML中的data-*属性：

以下CSS将使用这些自定义属性来放置相应的文本：

 span.badge[contenteditable] { display: inline-block; } span.badge[contenteditable]:empty::before { content: attr(data-placeholder); display: inline-block; } span.badge[contenteditable]:empty:focus::before { content: attr(data-focused-advice); } 

JS小提琴演示 。

参考文献：

• 兼容性：
  • CSS生成的内容（ ::before / ::after ） 。
  • :empty （以及其他’CSS 3’选择器） 。
• CSS：
  • :empty 。
  • 生成的内容，自动编号和列表 。

Answer 2

http://jsfiddle.net/rwmoehsc/2/

添加此css：

 #new-tag { min-width: 150px; display: block; min-height: 20px; } 

编辑：我没有失去编辑FF 33中的元素的能力

编辑2：也不是铬38