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

Question

在得到很好的回答后，我发现这可能与 Placeholder in contenteditable - focus event issue 重复

我有一个带有contenteditable="true" 的HTML <span> 元素。我的目标是使用 span 元素创建一个无缝的“输入”字段。我在使以下流程正常工作时遇到问题：

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

它的工作原理是当用户编辑元素并清除所有文本时，元素会折叠并变得不可编辑。我需要确保<span> 中始终有文本，或者我需要找到另一种处理这些情况的方法

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

<span class="badge"><span contenteditable="true" id="new-tag" class="badge alert-info">Make a new tag ..</span><i class="fa fa-lg fa-plus-circle"></i></span>  

还有我的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 <span> 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');
    }
});

有人可以让这个魔法发生吗？ Here is a fiddle 我发布的内容。

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 Fiddle demo.

为了使其更加可定制，鉴于 HTML 中的 data-* 属性：

<span class="badge">
    <span contenteditable="true" id="new-tag" class="badge alert-info" data-placeholder="Make a new tag" data-focused-advice="Start typing"></span><i class="fa fa-lg fa-plus-circle"></i>
</span>

以下 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 Fiddle demo.

参考资料：

• 兼容性：
  • CSS generated content (::before/::after)。
  • :empty (and other 'CSS 3' selectors)。
• CSS：
  • :empty。
  • Generated content, automatic numbering and lists。

Answer 2

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

添加这个css：

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

编辑：我不会失去在 FF 33 中编辑元素的能力

编辑 2：Chrome 38 中也没有