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

Question

经过很好的回答后，我发现这可能是 Placeholder in contenteditable - focus event issue 的重复项

我有一个 HTML <span>元素与 contenteditable="true" .我的目标是利用 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 .